javascript - morris.js 行更新 ymin

Question

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

chart.ymin = 10

但是 ymin 仍然是 0。

当在 morris.js 中不可能时，是否有任何其他图表库包含此类功能？

Answer 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>

---

方案二

将温度图表的 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