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>");
  });
};

const appendChart=（）=>{
$（文档）。在“单击”上，函数（）为“#btnSights”{
$（“#扩展体”）
.empty（）
.附加（“”）；
});
};

但我得到了以下错误：

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

在此之前必须存在

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

$（文档）。在（“单击”上，“#btnights”，函数（）{
$（“#扩展体”）
.empty（）
.附加（“”）；
if（！！document.getElementById（'myChart'））{
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
数据={
数据集：[
{
数据：[10,20,30]，
背景颜色：[
“rgba（35209961）”，
“rgba（50、115、220、1）”，
rgba（255、59、96、1）
]
}
], 
标签：[“阳性”、“中性”、“阴性”]
};
var myPieChart=新图表（ctx{
键入：“馅饼”，
数据：数据，
选项：{}
});
}
});
问题似乎是因为在将
myChart
画布添加到DOM之前，第一个代码块正在运行。我建议将该逻辑放在函数中，并在
append（）之后调用它