highcharts - nomi di grafici per più serie di grafici a torta in un grafico

Question

Devo visualizzare più grafici a torta che sono tutti correlati agli stessi dati. In quanto tale, voglio che tutti facciano parte dello stesso grafico e li implementino come singole serie.

Questo non ha funzionato fino a quando non ho provato a mettere etichette/titoli su ogni singolo grafico a torta. Sembra che io possa avere solo un titolo sull'intero gruppo. Vedi jsfiddle

C'è un modo per avere i titoli su ogni grafico?

See above jsfiddle for example 

Answer 1

È possibile utilizzare il renderer che consente di aggiungere testo in qualsiasi posizione.

http://api.highcharts.com/highcharts#Renderer.text()

Answer 2

ho incontrato lo stesso problema, e hanno trovato questa soluzione tramite Highcharts forum di supporto: http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

I Highcharts tizio ha scritto un plugin che si può vedere a lavorare sul seguente jsfiddle: http://jsfiddle.net/highcharts/tnSRA/

Ho copiato questo plugin in un file highcharts-plugins.js che ho incluso nel mio sito web, funziona come un incantesimo!

Ecco il codice del plugin:

/** 
* Pie title plugin 
* Last revision: 2012-12-21 
*/ 
(function (Highcharts) { 
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) { 

     var chart = this.chart, 
      center = this.center || (this.yAxis && this.yAxis.center), 
      titleOption = this.options.title, 
      box; 

     proceed.call(this); 

     if (center && titleOption) { 
      box = { 
       x: chart.plotLeft + center[0] - 0.5 * center[2], 
       y: chart.plotTop + center[1] - 0.5 * center[2], 
       width: center[2], 
       height: center[2] 
      }; 
      if (!this.title) { 
       this.title = this.chart.renderer.label(titleOption.text) 
        .css(titleOption.style) 
        .add() 
        .align(titleOption, null, box); 
      } else { 
       this.title.align(titleOption, null, box); 
      } 
     } 
    }); 

}(Highcharts)); 

e questo è come si configura il titolo (mettere questo nei vostri elementi della serie):

title: { 
      // align: 'left', 
      // x: 0 
      // style: { color: XXX, fontStyle: etc } 
      text: '<b>Pie 1</b><br>Subtext', 
      verticalAlign: 'top', 
      y: -40 
     }, 

Answer 3

migliorando la risposta di Vincent. Questo è il modo in cui l'ho usato per semplici titoli di testo.

extendHighcharts = function(){ 
     Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) { 

      //Clear the title if added previously 
      //if your chart data does not change, this reference storage for removal can be left out 
      if(this.chart.subChartTitleElement){        
       this.chart.subChartTitleElement[this.id].destroy(); 
      } 

      proceed.call(this); 


      if (this.center && this.options.title) { 


       //first, add the title, at center or anywhere, we need the container width to center it 
       this.chart.subChartTitleElement[this.id] = this.chart.renderer.text(this.options.title.text,this.center[0],this.center[1]); 
       this.chart.subChartTitleElement[this.id].css(this.options.title.style) 
       this.chart.subChartTitleElement[this.id].add(); 

       //Center the title using the container(Bounding Box = BBox) width 
       var xCenter = this.chart.plotLeft + this.center[0] - (this.chart.subChartTitleElement[this.id].getBBox().width/2), 
        yCenter = this.chart.plotTop + this.center[1] - 0.6 * this.center[2]; 

       this.chart.subChartTitleElement[this.id].attr(
           { 
            x:xCenter, 
            y:yCenter 
           } 
       ); 

       } 
      }); 
    } 

USO

    this.chart.addSeries({ 
         type: 'pie', 
         name: 'pie_chart_1', 
         data: pieChartData, 
         center: ['80%','25%'], 
         size: '35%', 
         showInLegend: false, 
         dataLabels: { 
          enabled: false 
         }, 

         //this part adds the relevant information 
         title: { 
          text:'Pie Chart Title', 
          verticalAlign: 'top', 
          y: -40 
         }, 
         id:'a_unique_id_or_name' 
        }); 

Answer 4

per migliorare ulteriormente su questo, il codice qui sotto correttamente maniglie sinistra, al centro, e la giustificazione a destra per i titoli. Vedere violino al http://jsfiddle.net/9y4Lj4yr/ per un esempio.

/** 
* Pie title plugin 
* Last revision: 2015-5-20 
*/ 
(function (Highcharts) { 
    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) { 

     var chart = this.chart, 
     center = this.center || (this.yAxis && this.yAxis.center), 
     titleOption = this.options.title, 
     box; 

     proceed.call(this); 

     if (center && titleOption) { 
      box = { 
       x: chart.plotLeft + center[0] - 0.5 * center[2], 
       y: chart.plotTop + center[1] - 0.5 * center[2], 
       width: center[2], 
       height: center[2] 
      }; 
      if (!this.title) { 
       this.title = this.chart.renderer.label(titleOption.text) 
       .css(titleOption.style) 
       .add() 
      } 
      var labelBBox = this.title.getBBox(); 
      if (titleOption.align == "center") 
       box.x -= labelBBox.width/2; 
      else if (titleOption.align == "right") 
       box.x -= labelBBox.width; 
      this.title.align(titleOption, null, box); 
     } 
    }); 

} (Highcharts));