Как добавить событие on click в мою линейную диаграмму, используя Chart.js

Я пытаюсь добавить событие on click в свою линейную диаграмму, используя Chart.js. У меня уже есть подсказки для инструмента, позволяющие отображать информацию из моих линейных диаграмм, но я также хотел бы добавить метод on click, который позволит мне узнать, где пользователь щелкнул по оси x. На данный момент мне бы хотелось, чтобы появилось предупреждение, дающее мне значение на оси x, где пользователь нажал.

RESEARCH:

Я просмотрел документацию диаграммы Chart.js, и я наткнулся на этот метод:.getPointsAtEvent(event)

Вызов getPointsAtEvent (событие) в вашем экземпляре диаграммы, передающий аргумент события или событие jQuery возвращают элементы точки которые находятся на той же позиции этого события.

canvas.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event. };

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

МОЙ КОД: (в javascript)

  //NOTE: the div 'roomForChart' has been already declared as <div id="roomForChart"></div>


 //creating html code inside of javascript to display the canvas used for the graph
 htmlForGraph = "<canvas id='myChart' width ='500' height='400'>";
 document.getElementById('roomForChart').innerHTML += htmlForGraph;

 //NOW TO CREATE DATA

   //the data for my line chart
    var data = {
         labels: ["Aug 1", "Aug 2", "Aug 3","Aug 4","Aug 5"], //the x axis
          datasets: [
            {   //my red line
                label: "Usage Plan",
                fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
                strokeColor: "rgba(224,0,0,1)",//creates the line
                pointColor: "rgba(244,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [1024, 1024, 1024, 1024, 1024]
           },

       {    //my green line
            label: "Overall Usage",
            fillColor: "rgba(48,197,83,0.2)",
            strokeColor: "rgba(48,197,83,1)",
            pointColor: "rgba(48,197,83,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48,197,83,1)",
            data: [15, 25, 45, 45, 1500]
       },
        {  //my blue line
            label: "Daily Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [15, 10, 20, 0, 5]
       }

     ] //ending the datasets
     }; //ending data


    //creating a variable for my chart
    var ctx = document.getElementById("myChart").getContext("2d");




//code to create a maximum y value on the chart
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    scaleOverride: true,
    scaleSteps: maxSteps,
    scaleStepWidth: Math.ceil(maxUsage / maxSteps),
    scaleStartValue: 0

});

 //what I have tried but it doesn't show an alert message
ctx.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

Для тех, кто с трудом просматривает диаграмму, вы идете:

Надеюсь, я предоставил достаточно информации, чтобы получить некоторую помощь. Пожалуйста, дайте мне знать, если мне нужно объясниться. Заранее спасибо!!!:)

Ответ 1

Измените эту строку

document.getElementById('roomForChart').innerHTML += htmlForGraph;

к этому

holder = document.getElementById('roomForChart');
holder.innerHTML += htmlForGraph;

а затем вы получите свой фрагмент, немного изменив

holder.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

Добавьте console.log(activePoints); в обработчик onclick, чтобы просмотреть содержимое переменной activePoints. Как я вижу, есть три объекта. Например, это значения для activePoints[0]

datasetLabel: "Usage Plan"
fillColor: "rgba(244,0,0,1)"
highlightFill: "#fff"
highlightStroke: "rgba(220,220,220,1)"
label: "Aug 4"
strokeColor: "#fff"
value: 1024
x: 371
y: 12.356097560975627

И они могут быть доступны, как показано ниже:

activePoints[0].label
activePoints[0].x
activePoints[0].y
activePoints[0].value

Хорошо проверить, является ли свойство undefined первым, поскольку за каждым событием клика нет данных.

Ответ 2

Я не мог заставить метод onclick работать.

Но мне, наконец, удалось запустить его с помощью метода click:

$("#canvas_id").click(function(e) {
   var activeBars = myBarChart.getBarsAtEvent(e); 
   console.log(activeBars[0]);
});

Примечание: этот пример, если для столбчатой диаграммы - другие диаграммы имеют несколько разные методы для извлечения точек (см. документацию).

Ответ 3

если вы используете новую версию ChartJs, используйте это:

canvas.onclick = function(evt){
   var activePoints = myLineChart.getElementsAtEvent(evt);
};

Ответ 4

Ответы, предоставленные на сегодняшний день, близки к правильному решению (решениям), но являются неполными. Вам нужно использовать getElementsAtEvent(), чтобы получить правильные элементы, но это дает вам набор элементов, которые находятся на щелчке x-index. В том случае, если вы используете более одного набора данных, это может быть несколько значений, по одному от каждого набора данных.

Чтобы выяснить правильный набор данных, который нужно извлечь, вызовите метод getDatasetAtEvent(). Это вернет список элементов, которые содержат элемент набора данных с щелчком. Выбирайте идентификатор набора данных из любого из них, они все равно Id.

Поместите два вместе, и у вас есть вызов, который вам нужен, чтобы выяснить данные, содержащиеся в элементе clicked. Передача значений, отличных от x и y при запуске набора данных, позволит вам делать всевозможные аккуратные трюки с этим событием. (Например, вызвать всплывающее окно с более подробной информацией о событии)

Может быть более сжатый способ получить эти данные, но я не нашел, что он обманывает диаграммы документов и билетов. Возможно, они добавят его в будущий выпуск.

// chart_name is whatever your chart object is named. here I am using a
// jquery selector to attach the click event.
$('#' + chart_name).click(function (e)
{
    var activePoints = myChart.getElementsAtEvent(event);
    var activeDataSet = myChart.getDatasetAtEvent(event);

    if (activePoints.length > 0)
    {
         var clickedDatasetIndex = activeDataSet[0]._datasetIndex;
         var clickedElementIndex = activePoints[0]._index;
         var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
    }
    // todo: add code to do something with value.
});