javascript - Chart.js - 未捕获的 TypeError : Object. defineProperty 在多个图表的非对象上调用

Question

我想渲染多个具有相同类名的图表。具有相同类名的 div 包含 canvas对象。大多数选项相同，但有一些不同。我想通过 data 发送它们attributes.Everything is okay but when I going to select canvas dom-object 上的元素，它来了:

Uncaught TypeError: Object.defineProperty called on non-object

我不知道为什么会这样。

下面是html代码

<td
    class ="crypt-marketcap-canvas"
    data-charts ="[65,59,81,81,56,55,40,80,90]" 
    data-bg = "d3f0df"
    data-border = "8cd8aa">
    <canvas />
</td>

和js代码是

var charts = document.getElementsByClassName("crypt-marketcap-canvas");

for( let chart of charts ){
  let data = chart.dataset.charts;
  // console.log(chart.dataset.charts);
  let bg = chart.dataset.bg;
  let border = chart.dataset.border;

  let canvas = chart.querySelector('canvas');
  // console.log(canvas);
  let ctx = canvas.getContext('2d');
  console.log(ctx);
  let lineChartData = {
    labels : ["1","2","3","4","5","6","7","8","9"],
    datasets : [
        {
            backgroundColor : '#' + bg,
            borderColor : '#' + border,
            data : data,
            bezierCurve : true
        }
    ]  
  }
  new Chart(ctx, { //Error is showing on this line
    type:"line",
    data:lineChartData,
    options:options
  });
}

Answer 1

你的问题是 data 是一个字符串 [65,59,81,81,56,55,40,80,90]" Chart 可以'明白了。

如果你做一个 JSON.parse 它会起作用:

let data = JSON.parse(chart.dataset.charts);

这会将数据转换回数组，我想这就是您的意图。

var charts = document.getElementsByClassName("crypt-marketcap-canvas");

for( let chart of charts ){
  let data = JSON.parse(chart.dataset.charts);
  // console.log(chart.dataset.charts);
  let bg = chart.dataset.bg;
  let border = chart.dataset.border;

  let canvas = chart.querySelector('canvas');
  let ctx = canvas.getContext('2d');
  let lineChartData = {
    labels : ["1","2","3","4","5","6","7","8","9"],
    datasets : [
        {
            backgroundColor : '#' + bg,
            borderColor : '#' + border,
            data : data,
            bezierCurve : true
        }
    ]  
  }
  new Chart(ctx, { //Error is showing on this line
    type:"line",
    data:lineChartData,
    options: {}
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<table>
  <tbody>
    <tr>
      <td
    class ="crypt-marketcap-canvas"
    data-charts ="[65,59,81,81,56,55,40,80,90]" 
    data-bg = "d3f0df"
    data-border = "8cd8aa">
    <canvas />
</td>
    </tr>
  </tbody>
  </table>

额外

如果您对如何将 data-charts 写入 DOM 有任何控制，我会说避免 [ 并且会做这样的事情:

<td
    class ="crypt-marketcap-canvas"
    data-charts ="65,59,81,81,56,55,40,80,90" 
    data-bg = "d3f0df"
    data-border = "8cd8aa">
    <canvas />
</td>

然后在您的脚本中:let data = chart.dataset.charts.split(','); 导致相同的结果。

我推荐这样做的原因是，如果发生奇怪的事情，JSON.parse 会抛出异常，因此您必须将其包装在 try/catch block 中。