动态地将数据值声明为图表js

Question

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

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,
            }]
        },

我想将数据从变量值转移到数据部分。请帮助我

Answer 1

创建图表时，需要将其分配给一个常量，以后在更新其数据集的值时可以引用该常量。

const chart = new Chart(...

然后您可以定义一个input元素，用户可以在其中输入各个值，每个值之间用空格分隔。单击button元素将触发addValues功能。

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

addValues函数将拆分input元素中的值，并将其转换为数字，最后将其分配给唯一数据集的data。然后，它需要调用chart.update()。

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

[请查看以下可运行的代码片段，以了解其工作原理。

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

const chart = new Chart('line-chart', {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    datasets: [{
      label: 'Total Collection',
      backgroundColor: 'blue',
      borderColor: 'blue',
      data: [],
      fill: false,
    }]
  }
});

input {
  width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
Values: <input id="chart1"><button type="button" onClick="addValues()">Add Values</button>
<canvas id="line-chart" height="80"></canvas>