Javascript 如何设置smart Morris.js折线图y边界？

我最近启动了一个仪表板项目，其中一部分是显示图表。我一直在学习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,
});

---

我在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};
}

---

您应该使用

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'
});

查看文档以了解更多信息

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