Javascript 使用chart.js jQuery绘制条形图

我对在chart.js中绘制条形图有疑问 让我解释一下我的问题，我创建了按钮和文本框，在这里你应该给出你想画的元素的数量。接下来我把数据放进去，它应该会工作

Var选项包含绘制图表的选项。 在选项之后，我会创建更多的字段，在这里我可以输入我的数据，当我创建了超过0个元素时，就会出现“绘制”按钮。 至少我有将数据放入数组和绘图的功能，这部分不起作用：（请帮助

我对饼图也做了同样的操作，但使用了不同的选项。所有内容都来自chart.js文档。有人能帮我弄清楚如何使用它吗？谢谢：）

链接按钮
在这里提供您的数据，您需要多少数据




var-boxCounter=0；
var数据=0；
var context=document.getElementById（'myChart'）.getContext（'2d'）；
变量选项={
scaleBeginAtZero:对，
scaleShowGridLines：对，
scaleGridLineColor:“rgba（0,0,0,05）”，
scaleGridLineWidth:1，
缩放水平线：对，
scaleShowVerticalLines：没错，
barShowStroke：是的，
杆行程宽度：2，
barValueSpacing:5，
barDatasetSpacing:1，
legendTemplate:“
”
}
$（“#添加文本框”）。在（“单击”，函数（）{
boxCounter=$（“#someShiet”）.val（）；
$（“#textboxContainer”）.html（“”）；
对于（var i=0；i<$（“#someShiet”）.val（）；i++）{
$（“#textboxContainer”）.append（“

”）；
}
if（$（“#someShiet”）.val（）>0）
$（“#textboxContainer”）.append（“”）；
});
$（文档）。在（“单击”，“绘图图”，函数（事件）{
数据=新数组（）；
对于（变量i=0；i

条形图数据格式与饼图数据格式不同。此外，您还没有将索引包含在文本框选择器中

您需要将处理程序更改为

$(document).on("click", "#drawChart", function (event) {
    data = {
        labels: [],
        datasets: [
            {
                fillColor: "lightblue",
                data: []
            }
        ]
    };
    for (var i = 0; i < boxCounter ; i++) {
        data.labels.push($("#whatever" + i).val() + "element");
        data.datasets[0].data.push($("#whatever" + i).val())
    }
    var mybarChartLoc = new Chart(context).Bar(data, options);
});

$（文档）。在（“单击”，“绘图图”，函数（事件）{
数据={
标签：[]，
数据集：[
{
填充颜色：“浅蓝色”，
数据：[]
}
]
};
对于（变量i=0；i

谢谢你的帮助，我用另一种方式做到了：）而且很有效

$(document).on("click", "#drawChart", function (event) {
    data = {
        labels: [],
        datasets: [
            {
                fillColor: "lightblue",
                data: []
            }
        ]
    };
    for (var i = 0; i < boxCounter ; i++) {
        data.labels.push($("#whatever" + i).val() + "element");
        data.datasets[0].data.push($("#whatever" + i).val())
    }
    var mybarChartLoc = new Chart(context).Bar(data, options);
});