如何设置智能Morris.js折线图y边界？

Question

我最近开始了一个仪表板项目，其中一部分是显示图表。我一直在学习 Morris.js 的图表，我已经到了可以从我的 localserver 中正确检索 JSON 数据并创建图表的地步。

问题是y轴太宽了。绘制的所有点都落在图表高度的三分之一左右。我知道我可以在创建图表时手动设置 ymax 和 ymin，但这需要我遍历所有对象以找到最高和最低数据点。虽然我不反对这样做，但我对 JavaScript 很陌生，我不确定具体的语法。最好，我想更改 Morris 中的设置，以便将 ymax 和 ymin 设置为合理的值。

这是地块的图像，JSON 收到：

如果重要的话，我创建图表的代码：

new Morris.Line({
    element: 'chart',
    data: data,
    xkey: 'date',
    ykeys: ['csi', 'econtrack', 'gurtam', 'pointer'],
    labels: ['csi', 'econtrack', 'gurtam', 'pointer'],
    behaveLikeLine: true,
});

Answer 1

我找不到其他方法来管理 Morris 中的 y 轴，所以我构建了自己的函数来查找最小值和最大值：

function min_and_max(json_data) {
    var min = Number.MAX_VALUE;
    var max = Number.MIN_VALUE;
    for (var data_key in json_data) {
        var entry = json_data[data_key]
        for(var key in entry) {
            var x = entry[key];
            if (!isNaN(x)) { // to avoid using date object
                if (x < min) {min = x;}
                else if (x > max) {max = x;}
            }
        }
    }
    return {'min': min, 'max': max};
}

所以我可以在创建图表时使用它，例如：

var limits = min_and_max(data);
var keys = Object.keys(data[0]);
keys = keys.filter(function(e){return e!=='date'});
new Morris.Line({
    element: element,
    data: data,
    xkey: 'date',
    ykeys: keys,
    labels: keys,
    ymin: limits['min'],
    ymax: limits['max'],
    hideHover: true
});

Answer 2

您应该使用 ymin:'auto' 配置选项：

new Morris.Line({
    element: 'chart',
    data: data,
    xkey: 'date',
    ykeys: ['csi', 'econtrack', 'gurtam', 'pointer'],
    labels: ['csi', 'econtrack', 'gurtam', 'pointer'],
    behaveLikeLine: true,
    ymin:'auto'
});

查看 morris.js 文档以获取更多信息。

如何设置智能Morris.js折线图y边界？

How to set smart Morris.js line chart y boundaries?

javascript

charts

json

morris.js