morris.js 行更新 ymin

Question

有什么方法可以更新 morris.js line/area 的 ymin 吗？我试过：

chart.ymin = 10

但是 ymin 仍然是 0。

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

Answer 1

解决方案 1

确保将 Morris 参数 resize 设置为 true。

然后，根据您的操作，您可以设置 ymin、重绘图表并确保图表位置正确（触发 window 调整大小）：

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 轴

删除试图 get/set 图表高度的代码，触发 window 调整大小并调用温度图表重绘。

最后在您的 $(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

morris.js 行更新 ymin

morris.js line update ymin

javascript

charts

morris.js