Как получить координаты отрисовки label в библиотеки chart js
2 ответа
@jorge
В Chart.js вы можете получить координаты меток, используя событие afterDatasetsDraw. Это событие вызывается после того, как все наборы данных были отрисованы на графике. В обработчике этого события вы можете получить доступ к контексту холста и вычислить координаты каждой метки с помощью методов API Canvas.
Вот пример, как это можно сделать:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', data: { labels: ['A', 'B', 'C', 'D'], datasets: [{ label: 'Dataset 1', data: [10, 20, 30, 40] }] }, options: { events: ['afterDatasetsDraw'], onAfterDatasetsDraw: function(chart) { var ctx = chart.ctx; chart.data.datasets.forEach(function(dataset, i) { var meta = chart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach(function(element, index) { // Получаем координаты метки var x = element._model.x; var y = element._model.y; // Отрисовываем метку в виде круга ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); }); } }); } } }); |
В этом примере мы используем свойство events в опциях графика, ч
@jorge
тобы указать, что мы хотим отслеживать событие afterDatasetsDraw. Затем мы определяем обработчик события onAfterDatasetsDraw, который получает доступ к контексту холста через chart.ctx.
Внутри обработчика мы используем метод forEach для обхода всех наборов данных и их элементов. Для каждого элемента мы получаем координаты метки с помощью свойства _model.x и _model.y. Затем мы используем методы API Canvas, такие как beginPath и arc, чтобы нарисовать метку в виде круга на указанных координатах.