Kliknij zdarzenia na wykresach kołowych w Chart.js

Mam pytanie dotyczące Chart.js.Kliknij zdarzenia na wykresach kołowych w Chart.js

Wyciągnąłem wiele sztuk za pomocą dostarczonej dokumentacji. Zastanawiam się, czy po kliknięciu pewnego plasterka jednego z wykresów mogę wykonać wywołanie ajaxa w zależności od wartości tego plasterka?

Na przykład, jeśli jest to mój data

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

jest to możliwe dla mnie, aby kliknąć na Red oznaczonego plasterek i wywołać url następującej postaci: example.com?label=red&value=300? Jeśli tak, jak mam to zrobić?

Źródło

2014-10-08 Newtt

Aktualizacja: W @Soham Shetty komentarzach, getSegmentsAtEvent(event) działa tylko dla wersji 1.x oraz 2.x getElementsAtEvent powinny być stosowane.

.getElementsAtEvent(e)

Looks for the element under the event point, then returns all elements at the same data index. This is used internally for 'label' mode highlighting.

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.
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. 
}; 

Przykład: https://jsfiddle.net/u1szh96g/208/

Original odpowiedź (ważne dla Chart.js wersji 1.x):

Można to osiągnąć stosując getSegmentsAtEvent(event)

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

Od: Prototype Methods

Więc można zrobić:

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

Oto pełny przykład roboczych:

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

Źródło

2014-10-08 13:54:03

Działa dla wersji 1.x. Dla więcej niż 2.x, musisz użyć metody 'getElementsAtEvent'. –

@SohamShetty, Dzięki za twoją opinię, zaktualizowałem odpowiedź na podstawie Twojego komentarza. –

Rozwiń, aby uzyskać szybką odpowiedź. @Tobias –

przypadku korzystania z wykresu Donught i chcesz, aby uniemożliwić użytkownikowi wywołać wydarzenie na kliknięcie wewnątrz puste miejsce wokół kręgów wykresu, możesz użyć następującej alternatywy:

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 ... */ 
    } 
};

Źródło

2016-01-07 14:48:46

Nas w wersji Chart.JS 2.1.3, odpowiedzi starsze niż ta nie są już ważne. Korzystanie getSegmentsAtEvent (event) Wyjście metoda na konsoli tę wiadomość:

getSegmentsAtEvent is not a function

więc myślę, że to musi być usunięte. Nie czytałem żadnego dziennika zmian, żeby być szczerym. Aby rozwiązać ten problem, po prostu użyj metody getElementsAtEvent(event), ponieważ można ją znaleźć on the Docs.

Poniżej znajduje się skrypt pozwalający uzyskać skutecznie klikniętą etykietę plasterka i wartość. Zwróć uwagę, że pobieranie etykiet i wartości jest nieco inne.

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 */ 
    } 
}

Mam nadzieję, że to pomaga.

Źródło

2016-05-25 13:35:47 alessandrob

Utworzyłem wykres pączków, który pokazuje wartość tekstową w środku otworu. Czy można śledzić kliknięcie tego tekstu? –

Należy również zauważyć, że jeśli chcesz uzyskać indeks zestawu danych takich jak skumulowane wykresy słupkowe, itp., Będziesz musiał użyć 'chart.getDatasetAtEvent (evt)' oprócz 'chart.getElementsAtEvent (evt)' powyżej aby uzyskać informacje. – HartleySan

Jeśli używasz maszynopis, kod jest trochę ostry, ponieważ nie ma typ wnioskowanie, ale to działa, aby uzyskać indeks danych, które zostały dostarczanego do wykresu: // wydarzenia publicznego 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); 
    } 



}

Źródło

2016-12-08 23:42:44

Chart.js 2.0 uczynił to jeszcze łatwiejszym.

Można go znaleźć w ramach wspólnej konfiguracji wykresów w dokumentacji. Powinien pracować na więcej niż wykresach kołowych.

options:{ 
    onClick: graphClickEvent 
} 

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

To wyzwala na całej tabeli, ale jeśli klikniesz na ciasto model tego tortu w tym indeksie, które mogą być wykorzystane, aby uzyskać wartość.

Źródło

2017-01-26 09:14:01

działa dobrze sektor chartJs onclick

ChartJS: Wykres kołowy - Dodaj opcje „onclick”

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

Źródło

2017-03-08 06:19:46

Aby skutecznie śledzić kliknij wydarzenia i na co wykres elementem kliknął użytkownik, robiłem następujących w moim js plik skonfigurować następujące zmienne:

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

Wtedy w mojej konfiguracji plik .html I wykres następująco:

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

Źródło

2018-01-19 17:38:14

Miałem te same problemy od kilku dni, Dziś znalazłem rozwiązanie. Pokazałem pełny plik gotowy do wykonania.

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

Źródło

2018-03-09 08:03:21

Kliknij zdarzenia na wykresach kołowych w Chart.js

Odpowiedz

Powiązane problemy