morris.js线更新

Question

是否有任何方法来更新morris.js线/区域的ymin？我试过的是：

chart.ymin = 10

但她仍然是0。

当它在morris.js中是不可能的时候，还有其他包含这样一个功能的图表列表吗？

Answer 1

解决方案1

确保将Morris参数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”。

确保包含莫里斯GitHub上可用的Morris CSS。如果没有此CSS，悬停图表将显示图表底部的数据，并在下一次数据更新时隐藏x轴，使之不受setInterval的影响。

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

最后，在$(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的以下分叉：Codemen.io/krlzlx/pen/prwMLr