highcharts - 一個圖表中多個餅圖系列的圖表名稱

Question

我需要顯示所有與相同數據相關的多個餅圖。因此，我希望他們都成爲同一個圖表的一部分，並將其作爲單個系列來實施。

這一切都沒有問題，直到我試圖把標籤/標題放在每個單獨的餅圖上。看來我只能在整個團隊中擁有一個頭銜。請參見jsfiddle

是否有任何方法在每個圖表上標題？

See above jsfiddle for example 

Answer 1

您可以使用允許在任何位置添加文本的渲染器。

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

Answer 2

我遇到同樣的問題，結果發現通過highcharts支持論壇此解決方案： http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

的Highcharts傢伙寫了一個插件，您可以在下面的jsfiddle看到工作：http://jsfiddle.net/highcharts/tnSRA/

我已將此插件複製粘貼到我包含在我的網站中的highcharts-plugins.js文件中，工作起來就像一個魅力！

這裏的插件代碼：

/** 
* 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)); 

這就是你如何配置你的標題（把這個在您的系列元素）：

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

Answer 3

提高對Vincent的答案。這就是我對簡單文本標題的使用方式。

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 
           } 
       ); 

       } 
      }); 
    } 

用法

    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

要在此進一步提高，下面的代碼正確處理離開後，爲標題，右對齊。例如，參見http://jsfiddle.net/9y4Lj4yr/小提琴。

/** 
* 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));