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: {}
    });
  });

当我单击按钮时，我的图表画布将被附加

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

但是出现以下错误：

未捕获的TypeError：无法读取属性未定义的“ getContext” 在HTMLDocument。（content.js：160）在l（jquery-3.3.1.min.js：2）在c（jquery-3.3.1.min.js：2）

Answer 1

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

添加画布后，我将在 click 事件上进行操作。

 $(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: {}
    });
  }
});

如何将图表数据加载到附加的画布

1 个答案: