如何使用for循環將數據添加到chart.js

Question

我的chart.js圖表​​具有以下腳本，並希望通過for循環動態添加更多數據。

有人知道如何創建我用for循環注釋掉的零件嗎？

非常感謝您的幫助。

var LINECHART = $('#lineModal');
var myLineChart = new Chart(LINECHART, {
    type: 'line',

    options: {
        elements: {
             point:{
                radius: 0
                    }
        },
        scales: {
            xAxes: [{
                display: true,
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 2,
                    maxRotation: 0,
                    minRotation: 0
                },
                gridLines: {
                    display: false
                }
            }],
            yAxes: [{
                ticks: {
                    suggestedmax: 13000,
                    suggestedmin: 13000
                },
                display: true,
                gridLines: {
                    display: false
                }
            }]
        },
        legend: {
            display: legendState
        }
    },
    data: {
        labels: modalChartDates[0],
        datasets: [
            {
                label: "Asset Price",
                fill: true,
                lineTension: 0.2,
                backgroundColor: "transparent",
                borderColor: "rgba(134, 77, 217, 0.57)",
                pointBorderColor: "rgba(134, 77, 217, 0.57)",
                pointHoverBackgroundColor: "rgba(134, 77, 217, 0.57)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                borderWidth: 2,
                pointBackgroundColor: "#fff",
                pointBorderWidth: 0,
                pointHoverRadius: 3,
                pointHoverBorderColor: "#fff",
                pointHoverBorderWidth: 3,
                pointRadius: 0,
                pointHitRadius: 5,
                data: modalChartData[0],
                spanGaps: false
            },
// I would like to add more of these parts of the code with a for loop. Is that possible?
// Start 
            {
                label: "Moving Average",
                fill: true,
                lineTension: 0.2,
                backgroundColor: "transparent",
                borderColor: "rgba(75, 75, 75, 0.7)",
                pointBorderColor: "rgba(75, 75, 75, 0.7)",
                pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                borderWidth: 2,
                pointBackgroundColor: "#fff",
                pointBorderWidth: 0,
                pointHoverRadius: 3,
                pointHoverBorderColor: "#fff",
                pointHoverBorderWidth: 3,
                pointRadius: 0,
                pointHitRadius: 5,
                data: modalMovingAverageData[0],
                spanGaps: false
            }
// End
        ]
    }
});

Answer 1

是的，有可能。 下面的代碼將10個對象添加到您的數據集中。

var LINECHART = $('#lineModal'); 
window.myLineChart=new Chart(LINECHART, 
{ 
type: 'line',
    options: {
    elements: {
         point:{
            radius: 0
                }
    },
    scales: {
        xAxes: [{
            display: true,
            ticks: {
                autoSkip: true,
                maxTicksLimit: 2,
                maxRotation: 0,
                minRotation: 0
            },
            gridLines: {
                display: false
            }
        }],
        yAxes: [{
            ticks: {
                suggestedmax: 13000,
                suggestedmin: 13000
            },
            display: true,
            gridLines: {
                display: false
            }
        }]
    },
    legend: {
        display: legendState
    }
},
data: {
    labels: modalChartDates[0],
    datasets: [
        {
            label: "Asset Price",
            fill: true,
            lineTension: 0.2,
            backgroundColor: "transparent",
            borderColor: "rgba(134, 77, 217, 0.57)",
            pointBorderColor: "rgba(134, 77, 217, 0.57)",
            pointHoverBackgroundColor: "rgba(134, 77, 217, 0.57)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            borderWidth: 2,
            pointBackgroundColor: "#fff",
            pointBorderWidth: 0,
            pointHoverRadius: 3,
            pointHoverBorderColor: "#fff",
            pointHoverBorderWidth: 3,
            pointRadius: 0,
            pointHitRadius: 5,
            data: modalChartData[0],
            spanGaps: false
        },
      {
            label: "Moving Average",
            fill: true,
            lineTension: 0.2,
            backgroundColor: "transparent",
            borderColor: "rgba(75, 75, 75, 0.7)",
            pointBorderColor: "rgba(75, 75, 75, 0.7)",
            pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            borderWidth: 2,
            pointBackgroundColor: "#fff",
            pointBorderWidth: 0,
            pointHoverRadius: 3,
            pointHoverBorderColor: "#fff",
            pointHoverBorderWidth: 3,
            pointRadius: 0,
            pointHitRadius: 5,
            data: modalMovingAverageData[0],
            spanGaps: false
        }

    ]
}
});
for(let i=0;i<10;i++){
     myLineChart.data.dataset.push({
            label: "item "+i,
            fill: true,
            lineTension: 0.2,
            backgroundColor: "transparent",
            borderColor: "rgba(75, 75, 75, 0.7)",
            pointBorderColor: "rgba(75, 75, 75, 0.7)",
            pointHoverBackgroundColor: "rgba(75, 75, 75, 0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            borderWidth: 2,
            pointBackgroundColor: "#fff",
            pointBorderWidth: 0,
            pointHoverRadius: 3,
            pointHoverBorderColor: "#fff",
            pointHoverBorderWidth: 3,
            pointRadius: 0,
            pointHitRadius: 5,
            data: modalMovingAverageData[0],
            spanGaps: false
        });
 }
 //Use the window object to update myLineChart
 window.myLineChart.update();

基於Chart.js的官方文檔和github 存儲庫