Cliquez sur événements sur les graphiques à secteurs dans le graphique.js
j'ai une question concernant le Graphique.js.
j'ai dessiné plusieurs piecharts en utilisant la documentation fournie. Je me demandais si en claquant une certaine tranche d'un des charts, je pouvais faire un appel ajax en fonction de la valeur de cette tranche?
Par exemple, si c'est mon 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 le Red étiqueté slice et appeler une url de la forme suivante:
example.com?label=red&value=300? Si oui, comment dois-je aller à ce sujet?
8 réponses
mise à Jour: @Soham Shetty commentaires, 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 indice de données. Ceci est utilisé en interne pour le mode "label" souligner.
appel
getElementsAtEvent(event)sur l'instance de votre graphique passant un argument d'un événement, ou jQuery l'événement, sera de retour le point d'éléments c'est la même situation que celle 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 originale (valide pour Graphique.js 1.version x):
vous pouvez y parvenir en utilisant getSegmentsAtEvent(event)
appel
getSegmentsAtEvent(event)sur l'instance de votre graphique passant un argument d'un événement, ou événement jQuery, retournera le segment des éléments qui se trouvent dans la même position que cet événement.
de Sorte que vous pouvez faire:
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
/* do something */
}
);
voici un exemple 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>
À L'Aide Du Graphique.Version JS 2.1.3, les réponses plus anciennes que celle-ci ne sont plus valides. En utilisant la méthode getSegmentsAtEvent(event), ce message sera affiché sur la console:
getsegmentatevent n'est pas une fonction
je pense Donc qu'il doit être supprimé. Je n'ai lu aucun changelog pour être honnête. Pour résoudre cela, il suffit d'utiliser getElementsAtEvent(event) méthode, car il peut être trouvé sur la doc.
ci-Dessous il peut être trouvé le script de obtenir efficacement cliqué l'étiquette de tranche et la valeur. Notez que la récupération de l'étiquette et la valeur est légèrement différente.
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.
Graphique.js 2.0 a rendu cela encore plus facile.
Vous pouvez le trouver sous la configuration du tableau commun dans la documentation. Devrait travailler sur plus de graphiques à secteurs.
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}
il déclenche sur l'ensemble du graphique, mais si vous cliquez sur une tarte le modèle de cette tarte y compris l'index qui peut être utilisé pour obtenir la valeur.
fonctionne bien chartJs secteur onclick
ChartJS : camembert - Ajouter des options "onclick"
options: {
legend: {
display: false
},
'onClick' : function (evt, item) {
console.log ('legend onClick', evt);
console.log('legd item', item);
}
}
si vous utilisez un diagramme de Donught, et que vous voulez empêcher l'utilisateur de déclencher votre événement en cliquant à l'intérieur de l'espace vide autour de vos cercles de diagramme, 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 ... */
}
};
j'ai été confronté aux mêmes problèmes depuis plusieurs jours, aujourd'Hui, j'ai trouvé la solution. J'ai montré le dossier complet qui est prêt à s'exécuter.
<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>
si vous utilisez TypeScript, le code est un peu funky parce qu'il n'y a pas d'inférence de type, mais cela fonctionne pour obtenir l'index des données qui ont été fournies au graphique: // événement public chartClicked (e:any): null { //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);
}
}
pour suivre avec succès les événements de clic et sur quel élément de graphique l'Utilisateur a cliqué, j'ai fait ce qui suit dans mon .js-je configurer les variables suivantes:
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 que je peux configurer 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>