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

I recently started a dashboard project and part of it is showing charts. I have been learning Morris.js for the charts and I got to the point where I am properly retrieving JSON data from my localserver and creating a chart.

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

The problem is that the y-axis is too wide. All the points plotted fall in about a third of the chart height. I am aware that I can manually set the ymax and ymin when creating the chart, but this would require that I loop through all the objects to find the highest and lowest data point. While I am not opposed to do that, I am very new to JavaScript and I'm not sure about the specific syntax. Preferably, I would like to change a setting in Morris so it sets the ymax and ymin to something reasonable.

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

Here is an image of the plot and JSON received:

这是收到的情节和JSON的图像:

And in case it matters, my code for creating the chart:

如果重要,我的代码用于创建图表:

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

2 个解决方案

#1

I could find nothing else to manage the y-axis in Morris so I built my own function to find min and max:

我找不到任何其他东西来管理莫里斯的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};
}

So I could use it when creating the chart like:

所以我可以在创建图表时使用它:

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

#2

You should use the ymin:'auto' configuration option :

您应该使用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'
});

Check morris.js documentation for more information.

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

#1