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

Javascript 使用chart.js同时创建多个饼图,javascript,charts,chart.js,Javascript,Charts,Chart.js,我试图使用chart.js库创建3个饼图,但每次都会引发以下错误: TypeError: me.getDatasetMeta(...).controller is null 创建图表的方法是使用名为create_chart的函数重写配置对象并创建新的图表实例。它可以很好地处理一个图表,但是当它被多次调用,甚至很快被多次单击调用时,就会出现前面提到的错误 html文件是: <div class="wrap_chart"> <div class="wrap_chart_v

我试图使用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>
当所有ifs的计算结果均为True时,将引发错误

创建图表功能如下所示:

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

}

当我将其添加到代码中时,它会引发比例未定义错误。

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

function sleep(ms) {
    return new Promise(create_chart => setTimeout(create_chart, ms));
}
async function demo() {
    await sleep(2000);
}
在“创建图表”功能中:

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