Question

如何在折线图中添加第二条数据线：

        var config = {
            type: "line",
            data: {
                labels: ["28/01/2018 15:07:34", "28/02/2018 12:31:27", "28/05/2018 01:21:28", "27/10/2018 01:21:28", "28/11/2018 05:09:28"],
                datasets: [{
                        label: "title",
                        backgroundColor: "transparent",
                        borderColor: "#000",
                        data: [65, 76, 32, 54, 43]
                    }]
            },
            options: {
                elements: {
                    line: {
                        tension: 0
                    }
                },
                responsive: true,
                scales: { },                    
            }
        };
        var myChart = new Chart(ctx, config);

包含数据：

labels: ["28/01/2018 15:07:34", "28/05/2018 01:21:28", "27/10/2018 01:21:28" ],  data: [50, 50, 50, 50, 50]

我也希望点之间的线具有红色，黑色，红色，黑色。我不知道该怎么做。

谢谢您的帮助

Answer 1

在 Chart js 3.2.1 版本中；

myChart.data.datasets[myChart.data.datasets.length] = {
  label: "",
  xAxisID: "x-axis-2",
  data: newDataArray.map((val, index) => {x: labels[i], y: val}),
  fill: false,
  backgroundColor: "",
  borderColor: "",
  borderWidth: 1
}
myChart.update();

myChart.data.datasets.length 如果您知道正在使用的数据集（行）的具体数量，则可以设置。

Answer 2

如果您想在线进行此操作（您已经有数据），可以将其添加到“数据集”中，这样：

data: {
    labels: ["28/01/2018 15:07:34", "28/02/2018 12:31:27", "28/05/2018 01:21:28", "27/10/2018 01:21:28", "28/11/2018 05:09:28"],
    datasets: [{
        label: "title",
        backgroundColor: "transparent",
        borderColor: "#000",
        data: [65, 76, 32, 54, 43]
    },{
        label: "title2",
        backgroundColor: "transparent",
        borderColor: "#000",
        data: [50, 50, 50, 50, 50]
    }]
},

如果您想在事后添加数据，则可以按如下所示将数据集推送到数据数组上：https://www.chartjs.org/docs/latest/developers/updates.html

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

Chart.js-如何向折线图添加第二条数据线

2 个答案: