时间戳

首页 > 解决方案 > 如何将图表数据加载到附加的画布

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

问题描述

我正在尝试使用 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>");
  });
};

但我收到以下错误：

未捕获的类型错误：无法读取 HTMLDocument 中未定义的属性“getContext”。(content.js:160) 在 l (jquery-3.3.1.min.js:2) 在 c (jquery-3.3.1.min.js:2)

标签： javascriptjquerychart.js

解决方案

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

在添加画布填充它之后，我要做的是点击事件。

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

推荐阅读