如何使用for循环将数据添加到chart.js

kuhbmx9i 于 2022-12-13 发布在 Chart.js

关注(0)|答案(1)|浏览(197)

我有下面的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
        ]
    }
});

chart.js

来源：https://stackoverflow.com/questions/50144557/how-to-add-data-to-chart-js-with-a-for-loop

1条答案

按热度按时间

yyyllmsg1#

下面的代码向数据集中添加了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.datasets.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();

基于官方文档和github存储库Chart.js

赞(0）回复(0）举报 2022-12-13

我来回答

如何使用for循环将数据添加到chart.js

1条答案

相关问题

热门标签

最新问答