Chart.js: Bar Chart Click События

Question

Я только начал работать с Chart.js, и я очень сильно расстроен. У меня работает сводная гистограмма, но я не могу заставить клики «события» работать.

Я нашел comment on GitHub by nnnick от Chart.js о том, чтобы использовать функцию getBarsAtEvent, даже если эта функция не может быть найден в Chart.js documentation на все (идти вперед, сделать поиск для него). В документации упоминается функция getElementsAtEvent ссылки chart, но только для линейных диаграмм.

Я установил слушатель событий (правильный путь) на моем холсте элемента:

canv.addEventListener('click', handleClick, false); 

... еще в моей handleClick функции, chart.getBarsAtEvent не определен!

Теперь, в документе Chart.js, существует инструкция о том, как зарегистрировать событие click для гистограммы. Это сильно отличается от комментария nnnick от GitHub от 2 лет назад.

В Global Chart Defaults вы можете установить функцию onClick для вашего графика. Я добавил функцию onClick в свою конфигурацию диаграммы, и он ничего не сделал ...

Итак, как, черт возьми, я получаю обратный вызов по щелчку для работы на моей гистограмме ?!

Любая помощь была бы принята с благодарностью. Благодаря!

P.S .: Я не использую мастер-сборку из GitHub. Я попытался, но он продолжал кричать, что require is undefined, и я не был готов включать CommonJS, чтобы я мог использовать эту библиотеку диаграмм. Я бы предпочел написать свои собственные диаграммы Данг. Вместо этого я загрузил и использую версию Standard Build, которую я загрузил прямо из ссылки в верхней части documentation page.

Пример: Вот пример конфигурации я использую:

var chart_config = { 
    type: 'bar', 
    data: { 
     labels: ['One', 'Two', 'Three'], 
     datasets: [ 
      { 
       label: 'Dataset 1', 
       backgroundColor: '#848484', 
       data: [4, 2, 6] 
      }, 
      { 
       label: 'Dataset 2', 
       backgroundColor: '#848484', 
       data: [1, 6, 3] 
      }, 
      { 
       label: 'Dataset 3', 
       backgroundColor: '#848484', 
       data: [7, 5, 2] 
      } 
     ] 
    }, 
    options: { 
     title: { 
      display: false, 
      text: 'Stacked Bars' 
     }, 
     tooltips: { 
      mode: 'label' 
     }, 
     responsive: true, 
     maintainAspectRatio: false, 
     scales: { 
      xAxes: [ 
       { 
        stacked: true 
       } 
      ], 
      yAxes: [ 
       { 
        stacked: true 
       } 
      ] 
     }, 
     onClick: handleClick 
    } 
}; 

Answer 1

мне удалось найти ответ на свой вопрос, посмотрев через Chart.js source code.

Предоставлено в строке 3727 из Chart.js, Standard Build, является метод .getElementAtEvent. Этот метод возвращает мне «элемент диаграммы», на который был нажат. Здесь имеются достаточные данные, чтобы определить, какие данные будут отображаться в развернутом виде на выбранном наборе данных.

О первом индексе массива, возвращаемом chart.getElementAtEvent, является значением _datasetIndex. Это значение показывает индекс набора данных, на который было нажато.

Конкретный бар, на который был нажат, я считаю, отмечен значением _index. В моем примере в моем вопросе _index будет указывать на One в chart_config.data.labels.

Моя handleClick функция теперь выглядит следующим образом:

function handleClick(evt) 
{ 
    var activeElement = chart.getElementAtEvent(evt); 

chart ..where является ссылкой диаграммы, созданной диаграммы.JS при выполнении: поэтому

chart = new Chart(canv, chart_config); 

Конкретный набор данных, который был выбран щелчком можно найти как:

chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index]; 

И там у вас есть. Теперь у меня есть datapoint, из которого я могу построить запрос, чтобы отображать данные на панели, на которую была нажата кнопка.

Answer 2

Молодцы! Это, похоже, возвращает значение данных, которое намечается, хотя во многих случаях может появляться более одного раза, что делает неясным, на что было нажато.

Это вернет фактическую метку данных нажимаемой панели. Я нашел это более полезным при сверлении в категорию.

chart_config.data.labels[activeElement[0]._index] 

Answer 3

Я был в состоянии сделать эту работу по-другому. Могу не поддерживаться, но иногда я считаю, что ни ярлык, ни значение не являются достаточными, чтобы получить необходимую информацию для заполнения сквозной развертки.

Так что я сделал добавить пользовательский набор атрибутов данных:

var ctx = document.getElementById("cnvMyChart").getContext("2d"); 
if(theChart != null) {theChart.destroy();} 
theChart = new Chart(ctx, { 
type: typ, 
data: { 
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
datakeys: ["thefirstone","thesecondone","thethirdone","thefourthone","thefifthone","thesixthone"], 
datasets: [{ 
    label: '# of Votes', 
    data: [12, 19, 3, 5, 2, 3], 

... и т.д.

Затем, когда мне нужно нажать клавишу детализации в другой Ajax вызова, я был возможность получить его с этим:

var theDrillThroughKey = theChart.config.data.datakeys[activePoints[0]._index]; 

так что я на самом деле не уверен, что это уместно, чтобы быть добавление пользовательских элементов в диаграмме данные, но он работает до сих пор в Chrome, IE и Firefox , Мне нужно было поместить больше информации в процесс, чем я действительно хотел отобразить.

Пример полной вещи: https://wa.rrdsb.com/chartExamples

Мысли?

Answer 4

Давайте предположим, что вы объявили диаграмму, используя метод, как так:

window.myBar = new Chart({chart_name}, { 
     type: xxx, 
     data: xxx, 
     events: ["click"], 
     options: { 
      ... 
     } 
    }); 

Хороший способ объявления OnClick событий предполагает прослушивание холста мыши, например, так:

({chart_name}.canvas).onclick = function(evt) { 
    var activePoints = myBar.getElementsAtEvent(evt); 
    // let's say you wanted to perform different actions based on label selected 
    if (activePoints[0]._model.label == "label you are looking for") { ... } 
} 

Answer 5

Hi это событие click по параметрам, которые получают значения от x и y по оси

onClick: function(c,i) { 
    e = i[0]; 
    console.log(e._index) 
    var x_value = this.data.labels[e._index]; 
    var y_value = this.data.datasets[0].data[e._index]; 
    console.log(x_value); 
    console.log(y_value); 
} 

Answer 6

Я нашел это решение в https://github.com/valor-software/ng2-charts/issues/489

public chartClicked(e: any): void { 
    if (e.active.length > 0) { 
    const chart = e.active[0]._chart; 
    const activePoints = chart.getElementAtEvent(e.event); 
    if (activePoints.length > 0) { 
    // get the internal index of slice in pie chart 
    const clickedElementIndex = activePoints[0]._index; 
    const label = chart.data.labels[clickedElementIndex]; 
    // get value by index 
    const value = chart.data.datasets[0].data[clickedElementIndex]; 
    console.log(clickedElementIndex, label, value) 
    } 
} 
}