使用多个x / y网格动态更新Chart.JS中的散点图/折线图(Dynamicly update scatter/line chart in Chart.JS with multiple x/y grids)

 我想创建一个函数，我可以发送数据推送到我的折线图。 我的功能目前看起来像这样： 
 
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();
}
 
 label是一个字符串 
 
 xp1，xp2，yp1，yp2是双打 
 
 我正在运行一个将执行此功能的循环。 什么都没发生，我的图表仍然是空白。 
 
 我查看了Chart.js文档 ，它似乎对我的情况没有帮助，看起来它们的示例代码中有错误 
 
 这是我的起始代码： 
 
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: {}
});

I would like to create a function that I can send data to push to my line chart. My function currently looks like this:
 
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();
}
 
label is a string
 
xp1, xp2, yp1, yp2 are doubles
 
I am running a loop that will execute this function. Nothing happens and my chart remains blank.
 
I have looked at the Chart.js docs and it doesn't seem to be helpful for my situation and it appears they have errors in their example code
 
This is my starting code:
 
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [''],
        datasets: [{}]
    },
    options: {}
});
 
This is what I expect it to look like once it's filled in:
 
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: {}
});

原文：https://stackoverflow.com/questions/49513143