wake-up-neo.com

Klicken Sie in Chart.js auf Ereignisse in Kreisdiagrammen

Ich habe eine Frage bezüglich Chart.js. 

Ich habe mit der bereitgestellten Dokumentation mehrere Kreisdiagramme gezeichnet. Ich habe mich gefragt, ob ich beim Anklicken eines bestimmten Segments eines Charts einen Ajax-Aufruf machen kann, abhängig vom Wert dieses Slice. 

Wenn dies beispielsweise meine data ist

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
], 

kann ich auf das mit Red beschriftete Slice klicken und eine URL der folgenden Form aufrufen: example.com?label=red&value=300? Wenn ja, wie gehe ich vor?

46
Newtt

Update: Wie @Soham Shetty kommentiert, funktioniert getSegmentsAtEvent(event) nur für 1.x und für 2.x getElementsAtEvent sollte verwendet werden.

. getElementsAtEvent (e)

Sucht nach dem Element unter dem Ereignispunkt und gibt dann alle Elemente mit demselben Datenindex zurück. Dies wird intern für die Hervorhebung im Beschriftungsmodus verwendet.

Wenn Sie getElementsAtEvent(event) in Ihrer Chart-Instanz aufrufen und ein Argument eines Ereignisses oder jQuery-Ereignisses übergeben, werden die Punktelemente zurückgegeben, die sich an derselben Position wie dieses Ereignis befinden.

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

Beispiel: https://jsfiddle.net/u1szh96g/208/


Originalantwort (gültig für Chart.js 1.x Version):

Sie erreichen dies mit getSegmentsAtEvent(event)

Wenn Sie getSegmentsAtEvent(event) in Ihrer Chart-Instanz aufrufen und ein Argument eines Ereignisses oder jQuery-Ereignisses übergeben, werden die Segmentelemente zurückgegeben, die sich an derselben Position wie dieses Ereignis befinden.

Von: Prototypmethoden

Sie können also Folgendes tun:

$("#myChart").click( 
    function(evt){
        var activePoints = myNewChart.getSegmentsAtEvent(evt);           
        /* do something */
    }
);  

Hier ist ein voll funktionsfähiges Beispiel:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
        <script type="text/javascript" src="Chart.js"></script>
        <script type="text/javascript">
            var data = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ];

            $(document).ready( 
                function () {
                    var ctx = document.getElementById("myChart").getContext("2d");
                    var myNewChart = new Chart(ctx).Pie(data);

                    $("#myChart").click( 
                        function(evt){
                            var activePoints = myNewChart.getSegmentsAtEvent(evt);
                            var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
                            alert(url);
                        }
                    );                  
                }
            );
        </script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>
72
Tobías

Mit der Chart.JS-Version 2.1.3 sind ältere Antworten nicht mehr gültig. Mit der getSegmentsAtEvent (event) -Methode wird diese Meldung auf der Konsole ausgegeben: 

getSegmentsAtEvent ist keine Funktion

Ich denke, es muss entfernt werden. Um ehrlich zu sein, habe ich kein Änderungsprotokoll gelesen. Um dies zu beheben, verwenden Sie einfach die getElementsAtEvent(event)-Methode, wie sie unter auf dem Docs gefunden wird. 

Darunter befindet sich das Skript, um effektiv angeklickte Slice-Label und -Werte zu erhalten. Beachten Sie, dass auch das Abrufen von Beschriftung und Wert etwas anders ist.

var ctx = document.getElementById("chart-area").getContext("2d");
var chart = new Chart(ctx, config);

document.getElementById("chart-area").onclick = function(evt)
{   
    var activePoints = chart.getElementsAtEvent(evt);

    if(activePoints.length > 0)
    {
      //get the internal index of slice in pie chart
      var clickedElementindex = activePoints[0]["_index"];

      //get specific label by index 
      var label = chart.data.labels[clickedElementindex];

      //get value by index      
      var value = chart.data.datasets[0].data[clickedElementindex];

      /* other stuff that requires slice's label and value */
   }
}

Ich hoffe es hilft.

49
alessandrob

Chart.js 2.0 hat dies noch einfacher gemacht.

Sie finden es unter der allgemeinen Diagrammkonfiguration in der Dokumentation. Sollte auf mehr als Kreisdiagramme arbeiten.

options:{
    onClick: graphClickEvent
}

function graphClickEvent(event, array){
    if(array[0]){
        foo.bar; 
    }
}

Es wird im gesamten Diagramm ausgelöst, aber wenn Sie auf einen Kreis klicken, wird das Modell des Kreises einschließlich des Indexes angezeigt, mit dem der Wert erhalten werden kann. 

21
Tom Glover

Arbeiten mit Fine-Chart-Sektor onclick

ChartJS: Tortendiagramm - Optionen "onclick" hinzufügen

              options: {
                    legend: {
                        display: false
                    },
                    'onClick' : function (evt, item) {
                        console.log ('legend onClick', evt);
                        console.log('legd item', item);
                    }
                }
10
Lakshmi RM

Wenn Sie ein Donut-Diagramm verwenden und verhindern möchten, dass Benutzer Ihr Ereignis durch Klicken in den leeren Bereich um Ihre Diagrammkreise auslösen, können Sie die folgende Alternative verwenden:

var myDoughnutChart = new Chart(ctx).Doughnut(data);

document.getElementById("myChart").onclick = function(evt){
    var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);

    /* this is where we check if event has keys which means is not empty space */       
    if(Object.keys(activePoints).length > 0)
    {
        var label = activePoints[0]["label"];
        var value = activePoints[0]["value"];
        var url = "http://example.com/?label=" + label + "&value=" + value
        /* process your url ... */
    }
};
5
Anwar

Ich stand seit einigen Tagen vor den gleichen Problemen. Heute habe ich die Lösung gefunden. Ich habe die vollständige Datei gezeigt, die zur Ausführung bereit ist.

<html>
<head><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
</script>
</head>
<body>
<canvas id="myChart" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    },
onClick:function(e){
    var activePoints = myChart.getElementsAtEvent(e);
    var selectedIndex = activePoints[0]._index;
    alert(this.data.datasets[0].data[selectedIndex]);


}
}
});
</script>
</body>
</html>
5
Sachin Raghav

Um Klickereignisse erfolgreich zu verfolgen und auf welches Diagrammelement der Benutzer geklickt hat, habe ich in meiner JS-Datei Folgendes ausgeführt:

vm.chartOptions = {
    onClick: function(event, array) {
        let element = this.getElementAtEvent(event);
        if (element.length > 0) {
            var series= element[0]._model.datasetLabel;
            var label = element[0]._model.label;
            var value = this.data.datasets[element[0]._datasetIndex].data[element[0]._index];
        }
    }
};
vm.graphSeries = ["Series 1", "Serries 2"];
vm.chartLabels = ["07:00", "08:00", "09:00", "10:00"];
vm.chartData = [ [ 20, 30, 25, 15 ], [ 5, 10, 100, 20 ] ];

Dann stelle ich das Diagramm in meiner .html-Datei wie folgt ein:

<canvas id="releaseByHourBar" 
    class="chart chart-bar"
    chart-data="vm.graphData"
    chart-labels="vm.graphLabels" 
    chart-series="vm.graphSeries"
    chart-options="vm.chartOptions">
</canvas>
1
Carlo Bos

Wenn Sie TypeScript verwenden, ist der Code etwas unkonventionell, da keine Typinferenz vorliegt. Dies funktioniert jedoch, um den Index der Daten zu erhalten, die dem Diagramm bereitgestellt wurden: // Veranstaltungen public chartClicked (e: any): void { //console.log(e);

    try {
        console.log('DS ' + e.active['0']._datasetIndex);
        console.log('ID ' +  e.active['0']._index);
        console.log('Label: ' + this.doughnutChartLabels[e.active['0']._index]);
        console.log('Value: ' + this.doughnutChartData[e.active['0']._index]);


    } catch (error) {
        console.log("Error In LoadTopGraph", error);
    }

    try {
        console.log(e[0].active);
    } catch (error) {
        //console.log("Error In LoadTopGraph", error);
    }



}
1
  var ctx = document.getElementById('pie-chart').getContext('2d');
 var myPieChart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'pie',

            });

             //define click event
  $("#pie-chart").click(
            function (evt) {
                var activePoints = myPieChart.getElementsAtEvent(evt);
                var labeltag = activePoints[0]._view.label;

                      });
0
PradipPatel1411