数组更改时图表.js更新

Question

我有一个关于chart.js的相对简单的问题，我无法工作。

我有一个函数可以进行ajax调用，并在运行一些计算后更改数组的值。

我希望我的图表显示每个值数组[0] - ＆gt;数组更新后的数组[9]，但无论我做什么，图表似乎都保持静态。

我的代码：

设置图表：

window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: true
    });
};

设置图表数据：

var lineChartData = {
    labels : ["1","2","3", "4", "5", "6", "7", "8", "9", "10"],
    datasets : [
        {
            label: "CreepSlain Analysis",
            fillColor : "rgba(40,35,100,0.2)",
            strokeColor : "rgba(0,0,0,1)",
            pointColor : "#FFFFFF",
            pointStrokeColor : "#000000",
            pointHighlightFill : "#000000",
            pointHighlightStroke : "#000000",
            data : [hmcArray[0],hmcArray[1],hmcArray[2],hmcArray[3],hmcArray[4],hmcArray[5],hmcArray[6],hmcArray[7],hmcArray[8],hmcArray[9]]
        }
    ]
};

当阵列空置时，图表的外观：

计算HMC ARRAY价值的代码：

function calculateHmc(aF,bF,cF,dF,eF,fF,gF,n) {

    var pvpFactor = ((aF * killArray[n]) + (bF * assistArray[n])) / (cF * deathArray[n]);
    pvpFactor = pvpFactor.toFixed(2);
    pvpFactorArray.push(pvpFactor);
    var pveFactor = ((dF * csArray[n]) + (eF * jungleCSArray[n]) + (fF * counterJungleCSArray[n])) / ((gameTimeArray[n])/60);
    pveFactor = pveFactor.toFixed(2);
    pveFactorArray.push(pveFactor);
    var auxFactor = (gF * crowdControlArray[n]);
    auxFactor = auxFactor.toFixed(2);
    auxFactorArray.push(auxFactor);

    var rawHMC = (0.8 * pvpFactor) + (0.4 * pveFactor) + (2.5 * auxFactor);
    hmcArray.push(rawHMC);

//The array gets updated with hmcArray.push(rawHMC);

... continued

图表在阵列更新后的外观：

我是否必须运行某种能够重新绘制图表的功能？如果是这样，我该怎么做？

非常感谢您的帮助！

Answer 1

来自文档：

.update( )

在Chart实例上调用update（）将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后渲染那些离线的eendr eendr循环。 < / p>

myLineChart.datasets[0].points[2].value = 50;
// Would update the first dataset's value of 'March' to be 50
myLineChart.update();
// Calling update now animates the position of March from 90 to 50.

我使用以下代码，让我知道是否有更有效的方法来做到这一点！

window.myLine.datasets[0].points[0].value = hmcArray[0];
window.myLine.datasets[0].points[1].value = hmcArray[1];
window.myLine.datasets[0].points[2].value = hmcArray[2];
window.myLine.datasets[0].points[3].value = hmcArray[3];
window.myLine.datasets[0].points[4].value = hmcArray[4];
window.myLine.datasets[0].points[5].value = hmcArray[5];
window.myLine.datasets[0].points[6].value = hmcArray[6];
window.myLine.datasets[0].points[7].value = hmcArray[7];
window.myLine.datasets[0].points[8].value = hmcArray[8];
window.myLine.datasets[0].points[9].value = hmcArray[9];
window.myLine.update();