使用图表将数据添加到折线图。js

Question

我想在图表中添加一个新数据，但浏览器在调用我的“add”函数时抛出一个错误，上面写着“UncaughtTypeError:undefined不是一个函数”。

图表对象似乎不识别“AddData”函数，但我不知道如何解决它。在文档中显示此函数对我来说无法正常工作。

.addData（valuesArray，label）在图表实例上调用addData（valuesArray，label），传递每个数据集的值数组以及这些点的标签。

小提琴样品http://jsfiddle.net/rferreiraperez/pevy7vsz/5/

var myLineChart = new Chart(ctx).Line(data);

$("#add").on( "click", function() {
    var month = $("#month").val();
    var point = $("#point").val();
    var points = new Array();
    points.push(point);
    console.log("adding...");
    console.log("month:" + month);
    console.log("point:" + point);
    myLineChart.addData(points, month);
});

谢谢。

Answer 1

这就是我为折线图所做的。

 var label_X = [0];
 var data_Y = [0];
 var line_chart;
var data = {
            labels: label_X,
            datasets: [{
                label: '# of Generations',
                data: data_Y,
                backgroundColor: [
                    'rgba(243, 187, 69, 0.7)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        };
        var options = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }]
            }
        };
        var ctx = $("#line-chart").get(0);
        line_chart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });

这就是所有初始化，然后您需要对其进行ajax调用

 $.get("someurl", {
            dataType: 'json'
        }).done(function (response) {

                data_Y.push((response.Y_value));
                label_X.push(response.X_labels);
                line_chart.update();

            });

Answer 2

我测试过了！并发现您使用的Chart.js的版本是0.2.0，但它没有addData方法。

您应该使用最新版本，然后再试一次，它应该可以工作！

http://www.chartjs.org/assets/Chart.min.js