morris.js line update ymin

Question

有什么方法可以更新morris.js行/区的ymin吗？ 我已经尝试过：

chart.ymin = 10 

但YMIN仍为0

当它`不可能morris.js，还有没有其他的图表libarys包括这样的功能？

Answer 1

解决方案1 ​​

确保您的莫里斯参数resize设置为true。

然后，在你的行动，你可以设置ymin，重新绘制图表，并确保图表处于有利位置（触发窗口大小调整）：

chart.ymin = 10; 
chart.redraw(); 
$(window).trigger("resize"); 

请尝试以下片段：

var data = [ 
 
    { Date: '2016-01-01', Sales: 10 }, 
 
    { Date: '2016-01-02', Sales: 20 }, 
 
    { Date: '2016-01-03', Sales: 40 }, 
 
    { Date: '2016-01-04', Sales: 5 }, 
 
    { Date: '2016-01-05', Sales: 50 } 
 
]; 
 

 
var chart = new Morris.Line({ 
 
    element: 'chartLine', 
 
    data: data, 
 
    xkey: 'Date', 
 
    ykeys: ['Sales'], 
 
    labels: ['Sales'], 
 
    resize: true, 
 
    xLabels: 'day', 
 
    parseTime: false 
 
}); 
 

 
$(".ymin").on("click", function() { 
 
    chart.ymin = 10; 
 
    chart.redraw(); 
 
    $(window).trigger("resize"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> 
 

 
<div id="chartLine"></div> 
 
<div class="ymin">Set ymin</div>

---

解决方案2

将Morris参数resize设置为您的温度图为false。

请确保您在Morris GitHub上包含Morris CSS。如果没有这个CSS，悬停图表将显示图表底部的数据，并会在setInterval的下一次数据更新中隐藏x轴。

删除试图获取/设置图表高度的代码，触发窗口大小调整并调用温度图表重绘。

最后添加以下代码在你$(document).ready功能：

var delay = (function() { 
    var timer = 0; 
    return function (callback, ms) { 
     clearTimeout(timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

$(window).resize(function() { 
    delay(function() { 
     TemperatureChart.redraw(); 
    }, 300); 
}).trigger('resize'); 

那么请CodePen以下叉：codepen.io/krlzlx/pen/prwMLr