Pregunta Los gráficos de tarta de Highcharts obtienen el ID de pie seleccionado


¿Cómo consigo que los diagramas de tarta Highcharts obtengan el ID de pie seleccionado?

Tengo una matriz de datos

var data= { name: series[i], y: Data[i],id:categorydata[i] };

Renderiza el cuadro

new Highcharts.Chart({ ....

  ....  
series: [{
                type: 'pie',
                name: 'Category',
                data: data
            }]
  });

¿Cómo obtengo la identificación del pastel seleccionado?

Estoy haciendo esto en

plotOptions: {
                series: {
                    animation: false,
                    events:{
                        click: function (event) {
                            var point = this;
                            //How do I Access the id??????? 
                            alert('value: ' + this.series);


                        }
                    }
                },

8
2018-03-20 20:17


origen


Respuestas:


Desea el manejo del evento en la configuración del punto, no en la serie. Cada cuña es un punto en una sola serie:

   var data = [{ name: 'One', y: 10, id: 0 },{ name: 'Two', y: 10, id: 1 }];

   // some other code here...

   series:[
      {
         "data": data,
          type: 'pie',
          animation: false,
          point:{
              events:{
                  click: function (event) {
                      alert(this.x + " " + this.y);
                  }
              }
          }          
      }
   ],

Violín aquí.

Código de ejecución completo:

var chart;
point = null;
$(document).ready(function () {

    var data = [{ name: 'One', y: 10, id: 0 },{ name: 'Two', y: 10, id: 1 }];
    
    chart = new Highcharts.Chart(
    {
       series:[
          {
             "data": data,
              type: 'pie',
              animation: false,
              point:{
                  events:{
                      click: function (event) {
                          alert(this.id);
                      }
                  }
              }          
          }
       ],
       "chart":{
          "renderTo":"container"
       },
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 320px; height: 200px"></div>


23
2018-03-20 21:09



Preguntas populares