ChartJs：将新数据加载到Chart

Question

在图表js中，当我尝试在按钮上加载新数据时，单击data将appended获取到现有图表。

我想要的是每当用户点击Submit时，相同/修改后的数据应该与图表绑定。

function chartDesign(compChartData) {


    var fullChartData = compChartData;                                
    var xAxisLbl;
    var dataSetItems = {};
    //var arraydata;
    var ds = [];
    var myData = [];
    $.each(fullChartData, function (key, value) {

        if (key === TempInfo.FormulaLabel) {
            var keyList = Object.keys(value[0]);

            for (var i = 0; i < keyList.length; i++) {

                if (keyList[i] != TempInfo.FormulaLabel) {
                    xAxisLbl = keyList[i];

                }
            }
            myData = value;
            var arrayData = value.map(function (row) {
                return row[TempInfo.FormulaLabel];
            });
            $scope.justDisplay = TempInfo.FormulaLabel;
            dataSetItems["fillcolor"] = "rgba(51, 0, 51, 1)";
            dataSetItems["label"] = TempInfo.FormulaLabel;
            dataSetItems["strokeColor"] = "rgba(51, 0, 51, 1)";
            dataSetItems["pointColor"] = "rgba(51, 0, 51, 1)";
            dataSetItems["pointStrokeColor"] = "rgba(51, 0, 51, 1)";
            dataSetItems["pointHighlightFill"] = "rgba(51, 0, 51, 1)";
            dataSetItems["pointHighlightStroke"] = "rgba(51, 0, 51, 1)";                        
            dataSetItems["data"] = arrayData;

            ds.push(dataSetItems);

        }
    });

    Array.prototype.mapProperty = function (property) {
        return this.map(function (obj) {
            return obj[property];
        });
    };


    lineChartData = {
        labels: myData.mapProperty(xAxisLbl),
        // labelsyaxis: newData.mapProperty('dates'),
        datasets: ds                                       
    };


    // to get canvas --> myChart
    $('#myChart').remove(); // this is my <canvas> element
    $('#chart-area').append('<canvas id="myChart" width="600" height="400"></canvas>');
    var cht = document.getElementById("myChart");
    var ctx = cht.getContext("2d");


    if (lineChart != null) {                    
        lineChart.destroy();
    }
    lineChart = new Chart(ctx).LineGraph(lineChartData, newopts);//render it again ...

    document.getElementById("legend").innerHTML = lineChart.generateLegend();

    // For legend
    //document.getElementById("legendName").innerHTML = lineChart.generateLegend();

}

注意：图表控件位于Angular ng-repeat内。数据是动态加载的。

Answer 1

一切都很好。数据本身包含附加内容。它与Chart.js无关。