javascript - 数组更改时图表 .js 更新

Question

我有一个关于 Charts.js 的相对简单的问题，但无法解决。

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

一旦数组更新，我希望我的图表显示每个值 array[0] --> array [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 数组值的代码:

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( )

在图表实例上调用 update() 将使用任何更新的值重新渲染图表，从而允许您编辑多个现有点的值，然后渲染这些 ione n imatanred eendr 循环。

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();