javascript - 在 chart.js 中为多轴折线图使用自定义数据格式

Question

我从服务器作为响应获得的数据格式如下：

   [
            {
                "date": "2019-03-04T14:59:35.000Z",
                "data1": 21.739999771118164,
                "data2": 57.72999954223633
            },
            {
                "date": "2019-03-04T14:59:42.000Z",
                "data1": 21.739999771118164,
                "data2": 57.72999954223633
            },
            {
                "date": "2019-03-04T14:59:50.000Z",
                "data1": 21.729999542236328,
                "data2": 57.7400016784668
            }
]

如何使用此数据格式使用 chart.js 创建多轴折线图？

标签： javascriptjsonformatchart.js

Answer 1

使用示例折线图 - 多轴，您可以尝试对其进行一些更改并找到如下所示的内容：

var json = [
    {
        "date": "2019-03-04T14:59:35.000Z",
        "data1": 21.739999771118164,
        "data2": 57.72999954223633
    },
    {
        "date": "2019-03-04T14:59:42.000Z",
        "data1": 21.739999771118164,
        "data2": 57.72999954223633
    },
    {
        "date": "2019-03-04T14:59:50.000Z",
        "data1": 21.729999542236328,
        "data2": 57.7400016784668
    }];

var labels = json.map(i => i.date);
var dataset1 = json.map(i => i.data1);
var dataset2 = json.map(i => i.data2);


let renderChart = function () {
    var ctx = document.getElementById('canvas').getContext('2d');
    new Chart(ctx, {
        "type": "line",
        "data": {
            "labels": labels,
            "datasets": [
                {
                    "label": "Dataset1",
                    "data": dataset1,
                    "fill": false,
                    "borderColor": "rgb(75, 192, 192)",
                    "lineTension": 0.1,
                    yAxisID: "y-axis-1",
                }, {
                    "label": "Dataset2",
                    "data": dataset2,
                    "fill": false,
                    "borderColor": "rgb(0, 192, 255)",
                    "lineTension": 0.2,
                    yAxisID: "y-axis-2",
                }]
        },
        "options": {
            responsive: false,
            hoverMode: 'index',
            stacked: false,
            title: {
                display: true,
                text: 'Multi Axis'
            },
            scales: {
                yAxes: [{
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "left",
                    id: "y-axis-1",
                }, {
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "right",
                    id: "y-axis-2",

                    // grid line settings
                    gridLines: {
                        drawOnChartArea: false, // only want the grid lines for one axis to show up
                    },
                }],
            }
        }
    });
}

上面的代码打印：