Chart.js: Диаграмма штриховок Нажмите События

Ответ 1

Мне удалось найти ответ на мой вопрос, просмотрев исходный код Chart.js.

Предоставляется в строке 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 - это ссылка на диаграмму, созданную chart.js при выполнении:

chart = new Chart(canv, chart_config);

Определенный набор данных, который был выбран кликом, можно найти следующим образом:

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

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

Ответ 2

Привет, это событие нажатия в опциях, которое получает значения от оси 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);
}

Ответ 3

Я нашел это решение на 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)
  }
 }
}

Ответ 4

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

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

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

Ответ 5

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

Итак, что я сделал, это добавить пользовательский набор атрибутов к данным:

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],

... и т.д.

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

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

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

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

Мысли?

Ответ 6

У меня была та же проблема с несколькими наборами данных, и я использовал этот обходной путь:

var clickOnChart = function(dataIndex){
    ...
}
var lastHoveredIndex = null;
var chart_options = {
    ...
    tooltips: {
        ...
        callbacks: {
            label: function(tooltipItem, chart) {
                var index = tooltipItem.datasetIndex;
                var value  = chart.datasets[index].data[0];
                var label  = chart.datasets[index].label;

                lastHoveredIndex = index;

                return value + "€";
            }
        }
    },
    onClick:function(e, items){
        if ( items.length == 0 ) return; //Clicked outside any bar.

        clickOnChart(lastHoveredIndex);
    }
}

Ответ 7

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

  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 say you wanted to perform different actions based on label selected
     if (activePoints[0]._model.label == "label you are looking for") { ... }
}