ChartJs 2.0 How do I obtain point information being clicked upon?

问题

How do you configure ChartJS version 2.0 to upon clicking on a point on a radar chart provide the data associated with that point i.e. label, data value, dataset name. I read on https://github.com/nnnick/Chart.js/releases that version 2.0 provides:

New event hooks like onHover and onClick do the hard work for you. They pass you the good stuff without even having to locate via event

Could someone please show me what I need to do I have read the documentation and tried attaching to the various click and onClick events which the different objects support but can not work out how to achieve getting the associated data.

Sample code (simplified) which I am using is:

<pre>

    <script type="text/javascript">
      var config = {
      type: 'radar',
      data: {
      labels: ["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total  Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","Longest Running Time (s)","Avg. IOPs per call","Avg. Elapsed Time (ms)","Avg. Num. Execs per Sproc","Avg IOPS per sproc"],
     datasets:
    [
     {
      label: "DB1",
      fillColor: "rgba(212, 212, 106, 0.2)",
      strokeColor: "rgba(212, 212, 106, 1)",
      pointColor: "rgba(212, 212, 106, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(212, 212, 106, 1)",
      data:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100]
     },
     {
      label: "DB2",
      fillColor: "rgba(165, 198, 99, 0.2)",
      strokeColor: "rgba(165, 198, 99, 1)",
      pointColor: "rgba(165, 198, 99, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(165, 198, 99, 1)",
      data: [41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.5613115389214]
     }
     ]
     }
    };

     $(function () {
            var myRadar = new Chart(document.getElementById("myChart"), config);
         //how do I attach to the onclick event which gives me the point info being clicked on in chartjs 2.0?
        });

</script>

<div class="radarChart">
     <canvas id="myChart" width="700" height="700"></canvas>
</div>

Many thanks in advance.

回答1:

You should be able to use the getElementsAtEvent method, like so

document.getElementById("myChart").onclick = function(evt){
    var activePoints = myRadar.getElementsAtEvent(evt);
    // use _datasetIndex and _index from each element of the activePoints array
};

Fiddle - http://jsfiddle.net/uwaszvk7/

回答2:

In addition you can use var activePoints = chartObj.getElementsAtXAxis(evt); to get the nearest active element based just on the x-axis. (Super useful for when you have some really small values)

回答3:

Another way to achieve this in ChartJS 2.0 is to use the lastActive property of the radar chart.

var myRadar = new Chart(document.getElementById("myChart"), config);
Chart.defaults.global.responsive = true;
Chart.defaults.global.hover.mode = 'single';
document.getElementById("myChart").onclick = function (evt) {
var activePoint = myRadar.lastActive[0];
if (activePoint !== undefined) {
        var datasetIndex = activePoint._datasetIndex;
                var index = activePoint._index;
                var datasetName = config.data.datasets[datasetIndex].label;
                var title = config.data.labels[index];
                var dataValue = config.data.datasets[datasetIndex].data[index];
                alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]");
            }
        };

回答4:

Calling getElementsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.

...
var canvas = document.getElementById("myChart");
var myRadar = new Chart(canvas, config);
canvas.onclick = function(evt) {

    // => activePoints is an array of points on the canvas that are at the same position as the click event.
    var activePoint = myRadar.getElementsAtEvent(evt)[0];

    if (activePoint !== undefined) {
        var dataset = myRadar.data.datasets[activePoint._datasetIndex];
        var title = myRadar.data.labels[activePoint._index];
        var oldValue = dataset.data[activePoint._index];
        var newValue = oldValue + 10;
        dataset.data[activePoint._index] = newValue;
    }

    // Calling update now animates element from oldValue to newValue.
    myRadar.update();

    console.log("Dataset: '"+ dataset.label + "' Element '" + title + "' Value updated from: " + oldValue + " to: " + newValue);
};

回答5:

I have a graph with multiple data sets. Using the proposed getElementsAtEvent(evt) function, returns all data sets at a given x position but not only the single dataset index that I clicked on. So, there is no possibility to identify the individual data set.

To get only the single point clicked on:

const activePoints = chartObj.getElementAtEvent(event);
const datasetIndex = activePoint[0]._datasetIndex;
const itemIndex = activePoint[0]._index;

Notice the missing "s" in getElementAtEvent() compared to getElementsAtEvent().

来源：https://stackoverflow.com/questions/32582122/chartjs-2-0-how-do-i-obtain-point-information-being-clicked-upon

标签

chart.js