javascript - Haga clic en eventos en gráficos circulares en Chart.js
jquery charts (10)
Chart.js 2.0 ha hecho esto aún más fácil.
Puede encontrarlo en la configuración de gráfico común en la documentación. Debería funcionar en más de gráficos circulares.
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}
Se activa en todo el gráfico, pero si hace clic en un pastel, el modelo de ese pastel incluye el índice que se puede usar para obtener el valor.
Tengo una pregunta sobre Chart.js.
He dibujado varios gráficos circulares utilizando la documentación proporcionada. Me preguntaba si al hacer clic en un segmento determinado de uno de los gráficos, ¿puedo hacer una llamada ajax dependiendo del valor de ese segmento?
Por ejemplo, si estos son mis
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"
}
],
¿es posible que haga clic en el segmento etiquetado en
Red
y llame a una url de la siguiente forma:
example.com?label=red&value=300
?
En caso afirmativo, ¿cómo hago para esto?
Dentro de las opciones, coloque su onclick y llame a la función que necesita como ejemplo el ajax que necesita, dejaré el ejemplo para que cada clic en un punto le indique el valor y pueda usarlo en su nueva función.
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: ''white'',
//backgroundColor:''#ffce00'',
align: ''start''
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: "white"
},gridLines: {
color: ''rgba(255,255,255,0.1)'',
display: true
}
}],
xAxes: [{
ticks: {
fontColor: "white"
},gridLines: {
display: false
}
}]
},
legend: {
display: false
},
//onClick: abre
onClick:function(e){
var activePoints = myChart.getElementsAtEvent(e);
var selectedIndex = activePoints[0]._index;
alert(this.data.datasets[0].data[selectedIndex]);
}
}
Me enfrentaba a los mismos problemas desde hace varios días. Hoy he encontrado la solución. He mostrado el archivo completo que está listo para ejecutarse.
<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>
Para realizar un seguimiento exitoso de los eventos de clic y en qué elemento gráfico hizo clic el usuario, hice lo siguiente en mi archivo .js. Configuré las siguientes variables:
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 ] ];
Luego, en mi archivo .html configuré el gráfico de la siguiente manera:
<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 está utilizando TypeScript, el código es un poco raro porque no hay inferencia de tipos, pero esto funciona para obtener el índice de los datos que se han proporcionado al gráfico: // eventos 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);
}
}
Si usa un gráfico Donught, y desea evitar que el usuario active su evento al hacer clic dentro del espacio vacío alrededor de los círculos de su gráfico, puede usar la siguiente alternativa:
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 ... */
}
};
Trabajando con buenos gráficos en el sector
ChartJS: gráfico circular - Agregar opciones "onclick"
options: {
legend: {
display: false
},
''onClick'' : function (evt, item) {
console.log (''legend onClick'', evt);
console.log(''legd item'', item);
}
}
Usando Chart.JS versión 2.1.3 , las respuestas anteriores a esta ya no son válidas. El uso del método getSegmentsAtEvent (evento) generará en la consola este mensaje:
getSegmentsAtEvent no es una función
Así que creo que debe ser eliminado.
No leí ningún registro de cambios para ser honesto.
Para resolver eso, solo use el método
getElementsAtEvent(event)
, ya que se puede encontrar
en los Documentos
.
A continuación se puede encontrar el script para obtener un valor y etiqueta de corte efectivamente presionados. Tenga en cuenta que también recuperar la etiqueta y el valor es ligeramente diferente.
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 */
}
}
Espero eso ayude.
Actualización:
como comenta @Soham Shetty,
getSegmentsAtEvent(event)
solo funciona para 1.xy 2.x
getElementsAtEvent
debe usarse.
.getElementsAtEvent (e)
Busca el elemento debajo del punto de evento, luego devuelve todos los elementos en el mismo índice de datos. Esto se usa internamente para resaltar el modo ''etiqueta''.
Llamar a
getElementsAtEvent(event)en su instancia de Chart pasando un argumento de un evento, o evento jQuery, devolverá los elementos de punto que están en la misma posición de ese evento.
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. };
Ejemplo: https://jsfiddle.net/u1szh96g/208/
Respuesta original (válida para la versión 1.x de Chart.js):
Puede lograr esto usando
getSegmentsAtEvent(event)
Llamar a
getSegmentsAtEvent(event)en su instancia de Chart pasando un argumento de un evento, o evento jQuery, devolverá los elementos del segmento que están en la misma posición de ese evento.
Entonces puedes hacer:
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
/* do something */
}
);
Aquí hay un ejemplo de trabajo completo:
<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>
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;
});