highcharts - 1つのグラフ内の複数の円グラフシリーズのグラフ名

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

ヴィンセントの答えに改善します。これは私が単純なテキストタイトルのために使った方法です。

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

       } 
      }); 
    } 

さらにこの上改善するためUSAGE

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