动态更新在具有多个的x / y格栅chart.js之分散/线图表

Question

我想创建，我可以将数据发送到推到我的折线图的功能。我目前的功能如下所示：

function addData(label, xp1, yp1, xp2, yp2) {
  chart.data.labels.push(label);
  chart.data.datasets.data.push({x: xp1, y: yp1}, {x: xp2, y: yp2}); 
  chart.update();
}

标签是一个字符串

XP1，XP2，YP1，YP2双打

我运行一个循环，将执行此功能。什么也没有发生，我的图表保持空白。

我已经看了看Chart.js docs，它似乎并没有对我的情况有益的，他们似乎在他们的示例代码中的错误

这是我的出发代码：

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [''],
        datasets: [{}]
    },
    options: {}
});

这是我希望它看起来像一旦它的填写：

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['a', 'b', 'c'],
        datasets: [{
            label: 'a',
            fill: false,
            data: [
                {
                    x: 0,
                    y: 9
                }, {
                    x: 3,
                    y: 9
                }
            ]
        },
        {
            label: 'a',
            fill: false,
            data: [
                {
                    x: 3,
                    y: 7
                }, {
                    x: 5,
                    y: 7
                }
            ]
        },
        {
            label: 'c',
            fill: false,
            data: [
                {
                    x: 5,
                    y: 5
                }, {
                    x: 10,
                    y: 5
                }
            ]
        }]
    },
    options: {}
});

Answer 1

你需要改变你的函数的方式：

function addData(label, xp1, yp1, xp2, yp2) {
    chart.data.labels.push(label);
    chart.data.datasets.push({ label: label, fill: false, data: [{ {x: xp1, y: yp1}, {x: xp2, y: yp2} }] });
    chart.update();
}

Answer 2

您可以直接访问您的数据和更新内容：

chart.data.datasets[0].data.push(   {x:5, y:2} ,{x:10, y:12},...,{x:50, y:25}      );

这是容易，如果你想保持该系列涂料/颜色设置。