Question

我正在尝试在DataTables <td>元素中插入图表，但是结果是网页上只有空白画布。而且JavaScript控制台不会返回任何错误。

对于DataTable中的每个td元素，我都执行create_chart（）过程，在其中动态创建canvas元素。之后，我为此画布添加一个简单的测试图。并且输出不返回结果，仅返回空白画布。试图在选项中添加{响应：false}，但结果是相同的。我已经在ChartJs github上阅读了很多有关分离元素（https://github.com/chartjs/Chart.js/issues/4067）的问题，并且据我了解，从2.7版开始，可以在创建图表时分离画布。可能是DataTables中的原因？但是我不确定。

create_chart(td) {
    var canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 150;
    var ctx = canvas.getContext('2d');
    td.appendChild(canvas);

    var myChart = new Chart(ctx, {
       type: 'line',
       data: {
          labels: ["2010", "2011", "2012", "2013"],
          datasets: [{
             label: 'Dataset 1',
             data: [150, 200, 250, 150],
             color: "#878BB6",
          }, {
             label: 'Dataset 2',
             data: [250, 100, 150, 10],
             color: "#4ACAB4",
          }]
       }
    });
}

所以，我不明白自己在做什么错。我希望在DataTable的每个<td>元素中都能看到图表，但是该表是动态构造的，并且画布也必须动态创建。我已经在此问题上花了2天的时间，所以请帮助我使其有效。

为什么ChartJS分离式画布在2.8.0版中为空，在哪里似乎可用？

0 个答案: