Создайте несколько круговых диаграмм одновременно, используя chart.js - PullRequest
Новая
       5

Создайте несколько круговых диаграмм одновременно, используя chart.js

0 голосов
/ 11 сентября 2018

Я пытаюсь создать 3 круговых диаграммы, используя библиотеку chart.js, но каждый раз возникает следующая ошибка: 

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>

Фрагмент, который отвечаетдля вызовов функций: 

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)

Ошибка возникает, когда все if s оценены как 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.

1 Ответ

0 голосов
/ 11 сентября 2018

Только что решил проблему, вызвав функцию задержки перед генерацией графиков: 

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