Question

我要渲染多个具有相同类名的图表。具有相同类名的div包含canvas对象。大多数选项相同，但有些不同。我想通过{{1}发送它们}属性。一切正常，但是当我要在dom-object上选择data元素时，它就会出现：

未捕获的TypeError：非对象上调用了Object.defineProperty

我不知道为什么会这样。

下面是html代码

canvas

和js代码是

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

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块中。

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

1 个答案:

额外