时间戳

首页 > 解决方案 > 如何将变量传递给chart.js中图表的数据集？

javascript - 如何将变量传递给chart.js中图表的数据集？

问题描述

我试图在 chart.js 中创建一个图表，部分使用代码中给出的静态数据值，但也部分使用用户给出的数据值。变量的值可能会发生变化，因为它是来自用户的不同解析输入的总和，我希望图表能够根据总和的变化实时更新。

我了解以下代码会返回错误，因为classaverage未定义变量，并且还了解可以重复调用类名并在Chart()函数下重新进行计算。但是，由于实际表实际上比示例中的表大得多，我宁愿使用更短的方法，而不必占用所有空间。这可能吗？

我的代码：

document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;

function myFunction() {
  var jack2 = document.getElementById("jack").innerText;
  var john2 = document.getElementById("john").innerText;
  var joe2 = document.getElementById("joe").innerText;

  var total2 = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);

  document.getElementById("total").innerHTML = total2;
}

var ctx = document.getElementById('totalchart').getContext('2d');

var chart = new Chart(ctx, {
  type: 'bar',

  data: {
    labels: ['Class', 'City', 'District'],
    datasets: [{
      label: 'Average Weight',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [classaverage, 130, 135]
    }]
  },

  options: {
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 200,
        }
      }]
    }
  }
});
table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-style: Arial;
}
<table>
  <tr class="cell">
    <th>Person</th>
    <th>Weight</th>
  </tr>
  <tr class="cell">
    <td>Jack</td>
    <td id="jack" oninput="myFunction()">120</td>
  </tr>
  <tr class="cell">
    <td>John</td>
    <td id="john" oninput="myFunction()">140</td>
  </tr>
  <tr class="cell">
    <td>Joe</td>
    <td id="joe" oninput="myFunction()">150</td>
  </tr>
  <tr class="cell">
    <td>Total</td>
    <td id="total"></td>
  </tr>
</table>

<canvas id="totalchart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

标签： javascriptjquerychart.js

解决方案

如果您更新答案，我不确定您要通过计算实现什么我将能够向您展示一个工作示例，但要实时更新图表，您需要 addData()：

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

可能还有removeData()：

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

除非你替换数据（）：

function replaceData(chart, data) {
    chart.data.labels = Object.keys(data);
    chart.data.datasets.forEach((dataset) => {
        dataset.data = Object.values(data);
    });
    chart.update();
}

我创建了一个示例小提琴显示 addData 的实现

请参考文档

推荐阅读