Javascript 将数据值动态声明到图表js

如何将变量中的值添加到图表数据部分

var values= document.getElementById("chart1").value;

new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'],
            datasets: [{
                label: 'Total Collection',
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                data: values,
                fill: false,
            }]
        },

---

我想将数据从变量值替换到数据部分。请帮助我创建图表时，需要将其指定给常数，以便稍后更新其数据集的值时引用

const chart = new Chart(...

然后您可以定义一个

input

元素，用户可以在其中输入各个值，每个值之间用空格分隔。一个

按钮

元素会在鼠标点击后触发

addValues

功能

<input id="chart1"><button type="button" onClick="addValues()">

请看一下下面的可运行代码片段，看看它是如何工作的

函数addValues（）{
var值=document.getElementById（“chart1”）.value；
chart.data.dataset[0].data=values.split（/\s+/）.map（v=>Number（v））；
chart.update（）；
}
常量图表=新图表（“折线图”{
键入：“行”，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[{
标签：'总收藏'，
背景颜色：“蓝色”，
边框颜色：“蓝色”，
数据：[]，
填充：假，
}]
}
});
输入{
宽度：400px；
}

值：添加值

function addValues() {
  var values = document.getElementById("chart1").value;
  chart.data.datasets[0].data = values.split(/\s+/).map(v => Number(v));
  chart.update();
}