В какой chart-библиотеке есть события по клику на области диаграммы?
Добрый день.
Подбираю диаграммки и перебираю различные chart-библиотеки дабы получить нужный результат.
Цель - создать вложенную диаграмму. Т е допустим у меня есть круговая диаграмма. В неё выведены к примеру автомобили всех марок мира. К примеру "Audi", "BMW", "VW", "Opel", "Mercedes". Но по клику на каждую часть эта диаграмма должна заменяться другой диаграммой. Допустим кликаю по "Audi" , у меня уже будет выполняться чуть другой SQL-запрос и строится новая диаграмма только с авто марки "Audi". Т е по факту всё что мне нужно это чтобы у частей диаграммы было событие "Click" (чтобы при помощи JS-а апдейтить диаграмму новыми данными) либо была возможность на отображаемые части вешать ссылку чтобы просто переходить на другой Action с другими get-параметрами.
Не подскажете какую библиотеку использовать для этих целей? Библиотека c3js сразу мимо
Честно копаюсь в документации и пока найти не могу как обработать клик по кокретной части круговой диаграммы (PIE)
Только сказано, что можно передать параметрами какие ивенты могут выполняться
options: {
events: ['click'],
}
});
Хотя вроде нашёл как клики обрабатывать
function clickHandler(evt) {
var firstPoint = myChart.getElementAtEvent(evt)[0];
if (firstPoint) {
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
}
}
Евгений, в объекте "options" передаете событие таким образом:
options: {
onClick: function(e) {
var bar = this.getElementAtEvent(e)[0];
}
}
И от переменной "bar", которая также является объектом, уже гуляете в любую сторону, там можно получиться и значение, и индекс, и индекс датасета. То же самое с ховером. После изменяете данные на новые марки машин и .update() ваш график, он красиво перерисуется.
Владислав Бойченко, По сути что мне нужно. Это по клику отправить новый Ajax запрос текущей вложенности. Получить JSON с новым датасетом и обновить диаграммку новым датасетом Chart(context).Line(New data);
Как вы будете получать новый JSON -- только ваше дело. А по поводу обновления диаграмы посмотрите, что я писал по поводу .update(), вам не нужно инициализировать новый график на месте старого, вам просто нужно обновить его с новым датасетом.
Владислав Бойченко, разбираюсь. Спасибо. Правда жаль, что объект этот не содержит в себе value.
Там по сути _datasetIndex:, _index, где первое - id dataset, второе id вот этого самого value который мне и нужно посылать на сервак дабы делать Апдейт датасета. Буду разбираться так как присылать сразу клиенту все возможные датасеты не хочу ибо и запросов будет много, и клиентская часть будет перегружена.
Но я сейчас разберусь, что из себя представляет объект Chart и спокойно получу значение при помощи объекта Chartelement. Так что отмечу решением ) Спасибо
Разобрал объект, значение получил вот так. Теперь можно писать дальше
var value_bar = myChart.data.datasets[bar._datasetIndex].data[bar._index];
