javascript - 如何将图表数据加载到附加 Canvas

Question

我正在尝试使用 ChartJS 像这样将一些数据加载到我的饼图中:

  $(document).ready(function() {
    var ctx = document.getElementById('myChart').getContext('2d');

    data = {
      datasets: [
        {
          data: [10, 20, 30],
          backgroundColor: [
            "rgba(35, 209, 96, 1)",
            "rgba(50, 115, 220, 1)",
            "rgba(255, 59, 96, 1)"
          ]
        }
      ],

      labels: ["Positive", "Neutral", "Negative"]
    };

    var myPieChart = new Chart(ctx, {
      type: "pie",
      data: data,
      options: {}
    });
  });

当我点击一个按钮时我的图表 Canvas 被附加

const appendChart = () => {
  $(document).on("click", "#btnInsights", function() {
    $("#extentionBody")
      .empty()
      .append("<canvas id='myChart'></canvas>");
  });
};

但是我得到以下错误:

Uncaught TypeError: Cannot read property 'getContext' of undefined at HTMLDocument. (content.js:160) at l (jquery-3.3.1.min.js:2) at c (jquery-3.3.1.min.js:2)

Answer 1

<canvas id='myChart'></canvas>需要在此之前存在 $(document).ready(function() { });您实际上是在调用尚不存在的东西。您的 Canvas 仅在按下按钮后才存在，这意味着写在 (document).ready() 上的代码函数将在 DOM 准备就绪后立即执行，从技术上讲是在按钮创建后立即执行，因此它不会等待用户单击它。

我会做的是在 click 事件上，在您添加 Canvas 后填充它。

 $(document).on("click", "#btnInsights", function() {
   $("#extentionBody")
     .empty()
     .append("<canvas id='myChart'></canvas>");

   if(!!document.getElementById('myChart')) {
    var ctx = document.getElementById('myChart').getContext('2d');
    data = {
       datasets: [
        {
          data: [10, 20, 30],
          backgroundColor: [
            "rgba(35, 209, 96, 1)",
            "rgba(50, 115, 220, 1)",
            "rgba(255, 59, 96, 1)"
          ]
        }
      ], 
      labels: ["Positive", "Neutral", "Negative"]
    };
    var myPieChart = new Chart(ctx, {
      type: "pie",
      data: data,
      options: {}
    });
  }
});