Chart.js 2.3更新一些(但不是全部)绘图数据

时间:2018-11-16 12:10:30

标签: javascript html chart.js

我试图在Chart.js 2.3.0中的一个图上显示两组数据,使用HTML文件触发js函数来更新包含数据的全局数组,然后使用Chart.js进行绘制。但是,我注意到一个数据集的图更新,而另一个数据集没有。
错误不在于生成数据本身,因为成功绘制的数据值依赖于未成功绘制的值。数据似乎是正确的(根据断点进行判断并在控制台中始终打印数据),并存储在正确的数组中,只是其绘制方式不如副本中的数据正确。生成未绘制数据的js是

function upDataPol() //Updates the global array "polData" with data generated by genP_z
{
    //The variable "B" used in genP_z is picked randomly from a M-B probability distribution
    var B = randn_MB();
    polData = genP_z(polData, B);
}

成功的数据来自:

function upDataKT() //Updates the "KTdata" and "KTnorm" arrays' values
{
    //Each member of KTdata is increased by the corresponding value stored in polData
    KTdata = addToData(KTdata, polData);  
    for (i = 0; i < KTdata.length; i++)
    {
        //takes the total KT data and normalises it according to the "noted" number of runs, 
        //then stores it
        KTnorm[i] = KTdata[i]/note; 
    }
}

Chart.js是:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, 
{
    type: 'line',
    data: 
    {
        labels: time,
        datasets: 
        [
            {   //Data is drawn from the polData array and, below, the KTnorm array
                data: polData, 
                label: "Polarisation",
                borderColor: "#8e5ea2",
                fill: false,
                pointRadius: 1,
                pointHitRadius: 0
            },
            {
                data: KTnorm,
                label: "KT",
                borderColor: "#3e95cd",
                fill: false,
                pointRadius: 1,
                pointHitRadius: 0
            }  
        ]   
    },
    options:
    {
        scales:
        {
            yAxes: 
            [{
                ticks:
                {
                    suggestedMax: 1,
                    suggestedMin: -1/3,
                    stepSize: 1/3
                }
            }]
        }
    }
});

最后,用于更改数据并更新绘图的按钮的HTML:

<a href="#" onclick="upDataPol(); myChart.update();">Click Here to show and add one polarisation function</a><br>
<a href="#" onclick="upDataKT(); myChart.update();">Click Here to update the K-T function</a><br>

我是js的新手,因此可以提供任何帮助:)

0 个答案:

没有答案