ハイチャートでは、マルチピラミッドチャートで各ピラミッドのタイトルを設定する方法

Question

シナリオは動的マルチピラミッドチャートで、ピラミッド番号、ピラミッドの位置、画面サイズなどのパラメータはすべて異なる場合があります。私は各ピラミッドの上にタイトルとしてシリーズ名を表示する方法を探しています。

私は、現在のライブラリを拡張することにより、「マルチ円グラフ内の各円グラフのタイトルを設定する方法」を発見しました：

Highcharts.seriesTypes.pie.prototype.setTitle = function (titleOption) { 
     var chart = this.chart, 
      center = this.center || (this.yAxis && this.yAxis.center), 
      labelBox, 
      box, 
      format; 

     if (center && titleOption) { 
      var centerX = center[0], 
       centerY = center[1], 
       diameter = center[2]; 

      box = { 
       x: chart.plotLeft + centerX - 0.5 * diameter, 
       y: chart.plotTop + centerY - 0.5 * diameter, 
       width: diameter, 
       height: diameter 
      }; 

      format = titleOption.text || titleOption.format; 
      format = Highcharts.format(format, this); 

      if (this.title) { 
       this.title.attr({ 
        text: format 
       }); 

      } else { 
       this.title = this.chart.renderer.label(format) 
        .css(titleOption.style) 
        .add(); 
      } 
      labelBox = this.title.getBBox(); 
      titleOption.width = labelBox.width; 
      titleOption.height = labelBox.height; 
      this.title.align(titleOption, null, box); 
     } 
    }; 

しかし、私はピラミッドに似た方法を適用することはできません。したがって、私の質問は、複数のピラミッドを持つピラミッドチャートの各ピラミッドのタイトルを設定するための回避策がありますか？ここで

はフィドルです：あなたのチャートには、このオプションを追加する https://jsfiddle.net/scottszb1987/hsbepxo5/

Answer 1

は、円グラフには、このオプションを追加することとほぼ同じである必要があります。

Highcharts.seriesTypes.pyramid.prototype.setTitle = function(titleOption) { 
    var chart = this.chart, 
     center = this.center || (this.yAxis && this.yAxis.center), 
     labelBox, 
     box, 
     format; 
    if (center && titleOption) { 
     var centerX = center[0], 
     centerY = center[1], 
     diameter = center[2]; 
     centerY < 0 ? 2 * diameter : centerY 
     box = { 
     x: chart.plotLeft + centerX - 0.5 * diameter, 
     y: centerY - 0.5 * diameter, 
     width: diameter, 
     height: diameter 
     }; 

     format = titleOption.text || titleOption.format; 
     format = Highcharts.format(format, this); 

     if (this.title) { 
     this.title.attr({ 
      text: format 
     }); 

     } else { 
     this.title = this.chart.renderer.label(format) 
      .css(titleOption.style) 
      .add(); 
     } 
     labelBox = this.title.getBBox(); 
     titleOption.width = labelBox.width; 
     titleOption.height = labelBox.height; 
     this.title.align(titleOption, null, box); 
    } 
    }; 

私は問題があなたのピラミッドチャートの中心位置をmiscalculatingれる小さなHighchartsのバグ、と接続されていると思います。ここでは、Highcharts githubの上でこの問題についての情報を見つけることができます。 ここhttps://github.com/highcharts/highcharts/issues/5500

あなたはのsetTitleが原因でこの問題のpartialy動作することを確認できます。 http://jsfiddle.net/hsbepxo5/1/

私は回避策として、あなたがrenderer.textを使用することを検討していることを考えます代わりに、あなたのチャートに新しい機能を追加する：ピラミッドには、このオプションを追加する http://api.highcharts.com/highcharts#Renderer.text

敬具、