在Highcharts中，如何爲多金字塔圖表中的每個金字塔設置標題

情景是一個動態多金字塔圖表，金字塔數字，金字塔位置，屏幕大小和其他參數都可能有所不同。我正在尋找一種方法在每個金字塔頂部顯示系列名稱作爲標題。在Highcharts中，如何爲多金字塔圖表中的每個金字塔設置標題

我發現了「如何設置標題多餅圖每個餡餅」，通過延長當前的庫：

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/

來源

2016-07-20 Feedfedfat

添加此選項金字塔應該是差不多了。問題在於，你有與此主題相關的小Highcharts錯誤：https://github.com/highcharts/highcharts/issues/5500 和Highcharts計算錯誤的金字塔中心位置。在這裏你可以看到一個例子顯示，setTitle因爲這個bug而偏愛工作：http://jsfiddle.net/hsbepxo5/1/你可以考慮使用renderer.text來代替：http://api.highcharts.com/highcharts# Renderer.text –

@GrzegorzBlachliński嗨，非常感謝！我想你是對的！正如你所提到的，我最終使用了'renderer.text'。如果你給他們留下一個答案，我會將它標記爲正確答案：D。 – Feedfedfat

高興地看到我的想法對你有用:)我發佈了它作爲答案 –

添加此選項，您的圖表應該差不多一樣加入這個選項餅圖。

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

我認爲這個問題與小的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

最好的問候，

來源

2016-07-21 08:21:51

在Highcharts中，如何爲多金字塔圖表中的每個金字塔設置標題

回答

相關問題