Я пытаюсь вставить диаграммы в элементы DataTables <td>
, но в результате на веб-странице остаются только пустые холсты.И консоль JavaScript не возвращает ошибок.
Для каждого элемента td в DataTable я выполняю процедуру create_chart (), где элемент canvas создается динамически.После этого я добавляю простую тестовую таблицу для этого холста.И результат не возвращает результата, только пустой холст.Пытался добавить {responseive: false} в настройках, но результат был таким же.Я много читал на gartub ChartJs о проблемах с отсоединенными элементами (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",
}]
}
});
}
Итак, я не могу понять, что я делаю неправильно. Я ожидаю увидеть диаграммы в каждом элементе <td>
в DataTable, но таблица построена динамически, и полотна должны бытьтакже создан динамически. Я уже потратил 2 дня на эту проблему, поэтому, пожалуйста, помогите мне заставить ее работать.