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

时间:2019-01-29 20:10:49

标签: chart.js

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

        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]

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

谢谢您的帮助

2 个答案:

答案 0 :(得分:0)

在 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 如果您知道正在使用的数据集(行)的具体数量,则可以设置。

答案 1 :(得分:-1)

如果您想在线进行此操作(您已经有数据),可以将其添加到“数据集”中,这样​​:

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