0

Допустим есть график нарисованный на chartjs.График

Суть задачи сделать labels "БИН" ссылками. Я вижу 2 пути реализации:

  1. Поставить событие "click" на них с помощью функционала библиотеки. Но проблема в том, что там такого функционала нет, что бы можно было поставить события на labels (По крайней мере я не нашел).
  2. Обернуть элемент Canvas элементом div и сделать его относительным графика, а ссылки относительными к labels "БИН", но проблема в том что график слишком динамический и подогнать координаты labels слишком сложно или даже невозможно, поэтому можно сделать так: получать координаты или логику отрисовки labels и с этими значениями отрисовывать поверх ссылки. Вот только как получить эти значения? Примерно должно получиться что то вроде такого: примерный результат

но что бы это работало в динамике с графиком.

1 ответ 1

0

Я разобрался, параметры самого графика лежат в:

const myChart = document.getElementById('myChart');
let years = ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'];
const data = {
    labels: years,
    datasets: [
        {
            backgroundColor: '#2C3E50',
            borderWidth: false,
            data: [5000000, 2512345, 14555555, 75142325, 35178952, 48521478, 19147258, 32147258, 21258369]
        }
    ]
}
const options = {};

const myChartBar = new Chart(myChart, {
    type: 'horizontalBar',
    data: data,
    options: options,
});

//отступ до графика
console.log(myChartBar.scales['y-axis-0'].margins.top);

//высота графика
console.log(myChartBar.scales['y-axis-0'].height);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>

просто потом с помощью этих параметров формируем блок и приравниваем его к labels

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.