Javascript 使用chart.js同时创建多个饼图
我试图使用chart.js库创建3个饼图,但每次都会引发以下错误: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
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);