javascript - morris.js行更新ymin

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

chart.ymin = 10

但ymin仍为0。

当在morris.js中无法使用时，是否还有其他图表库包含此类功能？

最佳答案

解决方案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。

确保包括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

关于javascript - morris.js行更新ymin，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45467711/