具有不同長度的Y軸標題時，可以在Highcharts中自動實現y軸標題偏移？

我已經把我的y軸標題放在軸的頂部，以可讀的方式（所以，轉過90°;像here）。但問題是，y軸標題越長，圖形被推開的越多。我可以用「偏移」來糾正。具有不同長度的Y軸標題時，可以在Highcharts中自動實現y軸標題偏移？

title: 
{ 
    text: "Very important data here", 
    align: 'high', 
    rotation: 0, 
}

現在，我有相當多的圖表。它們都在同一個圖表中有三個翻譯（de，en，fr）作爲文本元素。所以，代碼總是一樣的。沒有可能爲每個翻譯手動調整偏移量。

因此，我試圖找到一個計算短期和長期標題（如here）的正確偏移量的公式。現在，我正在使用「偏移量：txt.length * -5.5」;但是標題越長越好。試圖使用SQRT，但不是真的成功。

offset: txt.length * -5.5,

有沒有人有一個乾淨的方式來做到這一點？

來源

2013-05-22 luftikus143

你可以讓Highcharts繪製默認圖表與錯偏移，然後計算出什麼是標題和更新的簡單偏移寬度：

chart: { 
     events: { 
      load: function() { 
       var chart = this, 
        yAxis = chart.yAxis[0], 
        firstLabel = yAxis.ticks[yAxis.tickPositions[0]].labelBBox.width, 
        lastLabel = yAxis.ticks[yAxis.tickPositions[yAxis.tickAmount - 1]].labelBBox.width, 
        bb = yAxis.axisTitle.getBBox(); 
       yAxis.update({ 
        title: { 
         offset: -bb.width + (firstLabel > lastLabel ? firstLabel : lastLabel) //make sure that will be enough space for yAxis labels 
        } 
       }); 
      } 
     } 
    }

而且的jsfiddle：http://jsfiddle.net/kL5md/6/

Highcharts 4.x的演示： http://jsfiddle.net/kL5md/21/

來源

2013-05-22 11:19:37

哇，聽起來不錯。但是，我不明白它的工作原理。 [here]（http://geodev.grid.unep.ch/megatrends/data/bip_ch.php?lang=de）現實中的例子。在Highcharts跑完它之後，我必須加載事件嗎？非常感謝你的幫助！ – luftikus143

您必須將Highcharts升級至3.0+ –

太棒了！非常感謝！ – luftikus143

上述代碼在系列動態添加到圖形時不會工作。在這種情況下，只需將上面的代碼放入串行對象下的afterAnimate事件即可。

plotOptions:{ 
 
       series:{ 
 
        events:{ 
 
         afterAnimate: function(){ 
 
          console.log('test', this.chart.yAxis[0]); 
 
          var chart = this.chart, 
 
          yAxis = chart.yAxis[0], 
 
          tp = yAxis.tickPositions, 
 
          firstLabel = yAxis.ticks[tp[0]].label.getBBox().width, 
 
          lastLabel = yAxis.ticks[tp[tp.length - 1]].label.getBBox().width, 
 
          bb = yAxis.axisTitle.getBBox(); 
 

 
          yAxis.update({ 
 
           title: { 
 
            offset: -bb.width + (firstLabel > lastLabel ? firstLabel : lastLabel) + 15 
 
           } 
 
          }); 
 
         } 
 
        } 
 
       }, 
 
      }

來源

2017-09-11 14:05:52

具有不同長度的Y軸標題時，可以在Highcharts中自動實現y軸標題偏移？

回答

相關問題