使用 chart.js 同时创建多个饼图答案

【问题标题】：Create multiple pie chart simultaneously using chart.js使用 chart.js 同时创建多个饼图
【发布时间】：2018-09-11 11:06:04
【问题描述】：

我正在尝试使用 chart.js 库创建 3 个饼图，但每次都会引发以下错误：

TypeError: me.getDatasetMeta(...).controller is null

我创建图表的方式是使用一个名为create_chart 的函数来覆盖配置对象并创建一个新的图表实例。它与一个图表完美配合，但是当它被多次点击甚至快速调用时，它会引发上述错误。

html文件为：

<div class="wrap_chart">
    <div class="wrap_chart_view">
        <canvas id="chart-area"></canvas>
    </div>
</div>
<div class="wrap_chart_sub">
    <div class="wrap_chart_sub_view">
        <canvas id="chart-area1"></canvas>
        <canvas id="chart-area2"></canvas>
        <canvas id="chart-area3"></canvas>
    </div>
</div>

负责函数调用的sn-p是：

var reg = meta[label]["regulation"];
var vc = meta[label]["vc"];
var msc = meta[label]["msc"];
if(Object.keys(vc).length != 0){
    create_chart(vc, "Variation Type", 2)
};
if(Object.keys(msc).length != 0){
    create_chart(msc, "Functional Consequence", 3)
};
if (Object.keys(reg).length != 0){
    create_chart(reg, "regulation", 1)

当所有 ifs 评估为 True 时引发错误。

create_chart 函数如下：

function create_chart(obj, lbl, ind){
    var conf2 = Object.assign({}, config_x);
    var data = Object.values(obj);
    var labels = Object.keys(obj);
    //console.log(data);
    //console.log(labels);
    var cols = [];
    for(var i = 0; i< labels.length; i++) {
        cols.push(getRandomColor());
    }
    var dataset = [{
            data: data,
            backgroundColor: cols,
            label: lbl
        }]
    conf2.data.datasets = dataset;
    conf2.data.labels = labels;
    conf2.options.title.text = lbl;
    console.log(conf2);
    var canvas_x = document.getElementById('chart-area' + ind);
    var ctx2 = canvas_x.getContext('2d');
    new Chart(ctx2, conf2);

}

我使用控制台记录了所有内容，似乎一切都很好。我能想到的唯一问题是实例化在Chart(ctx2, conf2); 行的工作方式。我还检查了文档并遇到了DatasetController bu 在这种情况下无法使用它。

Chart.controllers.pie = Chart.DatasetController.extend({})

当我将它添加到我的代码中时，它会引发 scale is undefined error。

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

刚刚通过在生成图表之前调用延迟函数解决了问题：

function sleep(ms) {
    return new Promise(create_chart => setTimeout(create_chart, ms));
}
async function demo() {
    await sleep(2000);
}

在create_chart函数中：

demo();
new Chart(ctx2, config);

【讨论】：