Cliquer sur les événements dans les graphiques à secteurs dans Chart.js
J'ai une question concernant Chart.js.
J'ai dessiné plusieurs parties à l'aide de la documentation fournie. Je me demandais si au clic d'une certaine tranche de l'un des graphiques, je pouvais effectuer un appel ajax en fonction de la valeur de cette tranche?
Par exemple, s'il s'agit de ma 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"
}
],
est-il possible pour moi de cliquer sur la tranche étiquetée Red et d'appeler une URL du type suivant: example.com?label=red&value=300? Si oui, comment puis-je m'y prendre?
Mise à jour: Comme le commente @Soham Shetty, getSegmentsAtEvent(event) ne fonctionne que pour 1.x et pour 2.x getElementsAtEvent doit être utilisé.
.getElementsAtEvent (e)
Recherche l'élément sous le point d'événement, puis renvoie tous les éléments au même index de données. Ceci est utilisé en interne pour le mode 'label' mise en évidence.
Appel de
getElementsAtEvent(event)sur votre instance Chart en passant un l'argument d'un événement, ou un événement jQuery, retournera les éléments de points qui sont à la même position de cet événement.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. };
Exemple: https://jsfiddle.net/u1szh96g/208/
_ {Réponse d'origine (valable pour la version de Chart.js 1.x)):
Vous pouvez y parvenir en utilisant getSegmentsAtEvent(event)
Appel de
getSegmentsAtEvent(event)sur votre instance Chart en passant un l'argument d'un événement, ou un événement jQuery, retournera le segment éléments qui sont à la même position de cet événement.
Alors tu peux faire:
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
/* do something */
}
);
Voici un exemple de travail complet:
<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>
Avec Chart.JS version 2.1.3, les réponses plus anciennes que celle-ci ne sont plus valides. L'utilisation de la méthode getSegmentsAtEvent (event) affichera sur la console le message suivant:
getSegmentsAtEvent n'est pas une fonction
Donc, je pense qu'il faut l'enlever. Pour être honnête, je n'ai lu aucun changelog. Pour résoudre ce problème, utilisez simplement la méthode getElementsAtEvent(event), car on peut la trouver dans Docs .
Vous trouverez ci-dessous le script permettant d’obtenir un libellé et une valeur de tranche correctement cliqués. Notez également que récupérer l'étiquette et la valeur est légèrement différent.
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 */
}
}
J'espère que ça aide.
Chart.js 2.0 a rendu cela encore plus facile.
Vous pouvez le trouver sous configuration de carte commune dans la documentation. Devrait travailler sur plus de graphiques à secteurs.
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}
Cela déclenche sur tout le graphique, mais si vous cliquez sur un graphique, le modèle de ce graphique, y compris l'index, peut être utilisé pour obtenir la valeur.
Travailler bien le secteur chartJs onclick
ChartJS: camembert - Ajout d'options "onclick"
options: {
legend: {
display: false
},
'onClick' : function (evt, item) {
console.log ('legend onClick', evt);
console.log('legd item', item);
}
}
Si vous utilisez un graphique en anneau et que vous souhaitez empêcher l'utilisateur de déclencher votre événement en cliquant dans l'espace vide autour des cercles de votre graphique, vous pouvez utiliser l'alternative suivante:
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 ... */
}
};
Je faisais face aux mêmes problèmes depuis plusieurs jours. Aujourd'hui, j'ai trouvé la solution. J'ai montré le fichier complet qui est prêt à être exécuté.
<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>
Pour suivre correctement les événements de clic et sur quel élément de graphique l'utilisateur a cliqué, j'ai configuré les variables suivantes dans mon fichier .js:
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 ] ];
Ensuite, dans mon fichier .html, je configure le graphique comme suit:
<canvas id="releaseByHourBar"
class="chart chart-bar"
chart-data="vm.graphData"
chart-labels="vm.graphLabels"
chart-series="vm.graphSeries"
chart-options="vm.chartOptions">
</canvas>
Si vous utilisez TypeScript, le code est un peu génial car il n'y a pas d'inférence de type, mais cela fonctionne pour obtenir l'index des données fournies au graphique: // événements charte publiqueClicked (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);
}
}
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;
});