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

我有以下用于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
        ]
    }
});

---

是的，这是可能的。下面的代码将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();

var LINECHART=$（'#lineModal'）；
window.myLineChart=新图表（折线图，
{ 
键入：“行”，
选项：{
要素：{
要点：{
半径：0
}
},
比例：{
xAxes：[{
显示：对，
滴答声：{
autoSkip：是的，
马克斯：2，
最大旋转：0，
最小旋转：0
},
网格线：{
显示：假
}
}],
雅克斯：[{
滴答声：{
建议最大值：13000，
建议人数：13000
},
显示：对，
网格线：{
显示：假
}
}]
},
图例：{
显示：legendState
}
},
数据：{
标签：modalChartDates[0]，
数据集：[
{
标签：“资产价格”，
填充：是的，
线张力：0.2，
背景色：“透明”，
边框颜色：“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:'斜接'，
边界宽度：2，
pointBackgroundColor:#fff“，
pointBorderWidth:0，
点半径：3，
pointHoverBorderColor:#fff“，
pointHoverBorderWidth:3，
点半径：0，
点半径：5，
数据：modalChartData[0]，
空白：假
},
{
标签：“移动平均线”，
填充：是的，
线张力：0.2，
背景色：“透明”，
边框颜色：“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:'斜接'，
边界宽度：2，
pointBackgroundColor:#fff“，
pointBorderWidth:0，
点半径：3，
pointHoverBorderColor:#fff“，
pointHoverBorderWidth:3，
点半径：0，
点半径：5，
数据：modalMovingAverageData[0]，
空白：假
}
]
}
});
对于（让i=0；i是），这是可能的。下面的代码将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();

var LINECHART=$（'#lineModal'）；
window.myLineChart=新图表（折线图，
{ 
键入：“行”，
选项：{
要素：{
要点：{
半径：0
}
},
比例：{
xAxes：[{
显示：对，
滴答声：{
autoSkip：是的，
马克斯：2，
最大旋转：0，
最小旋转：0
},
网格线：{
显示：假
}
}],
雅克斯：[{
滴答声：{
建议最大值：13000，
建议人数：13000
},
显示：对，
网格线：{
显示：假
}
}]
},
图例：{
显示：legendState
}
},
数据：{
标签：modalChartDates[0]，
数据集：[
{
标签：“资产价格”，
填充：是的，
线张力：0.2，
背景色：“透明”，
边框颜色：“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:'斜接'，
边界宽度：2，
pointBackgroundColor:#fff“，
pointBorderWidth:0，
点半径：3，
pointHoverBorderColor:#fff“，
pointHoverBorderWidth:3，
点半径：0，
点半径：5，
数据：modalChartData[0]，
空白：假
},
{
标签：“移动平均线”，
填充：是的，
线张力：0.2，
背景色：“透明”，
边框颜色：“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:'斜接'，
边界宽度：2，
pointBackgroundColor:#fff“，
pointBorderWidth:0，
点半径：3，
pointHoverBorderColor:#fff“，
pointHoverBorderWidth:3，
点半径：0，
点半径：5，
数据：modalMovingAverageData[0]，
空白：假
}
]
}
});
对于（设i=0；这非常有用，但如果其他人只是复制和粘贴“推送”代码行，则会出现输入错误。数据集上的代码行应为复数，但在示例中为单数。这非常有用，但如果其他人只是复制和粘贴“推送”代码行，有一个输入错误。数据集上的行应该是复数，但在示例中是单数。