2016-09-09 70 views
0

我想頂層動態設置yAxis的標題,具體取決於yAxis是顯示Gbps還是Mbps。Highcharts - 動態設置yAxis標題

儘管找不到標題的格式化函數,但我嘗試過的所有其他方法都失敗了。

有關如何做到這一點的任何建議?

這是y軸選項代碼:

yAxis: [{ 
       labels: { 
       formatter: function() { 
        maxDataValue = ((this.chart.yAxis["0"].dataMax * 8)/300)/1024; 
        if (maxDataValue < 1000) { 
        return Math.floor(((this.value * 8)/300)/1024) + " Mbps"; 
        } else { 
        return Math.floor(((this.value * 8)/300)/1048576) + " Gbps"; 
        } 
       } 
       }, 
       title: { 
       enabled: true, 
       text: unit, 
       style:{ 
        fontWeight:'bold' 
       } 
       }, 
       tickmarkPlacement: 'on', 
       plotLines: [{ 
       value: 0, 
       width: 2, 
       color: '#333333' 
       }] 
      }], 

回答

0

y軸的標題。

var title = ''; 
. 
. 
. 
. 
yAxis: [{ 
    labels: { 
     formatter: function() { 
      maxDataValue = ((this.chart.yAxis["0"].dataMax * 8)/300)/1024; 
      if (maxDataValue < 1000) { 
       title = 'Mbps'; 
       return Math.floor(((this.value * 8)/300)/1024) + " Mbps"; 
      } else { 
       title = 'Gbps'; 
       return Math.floor(((this.value * 8)/300)/1048576) + " Gbps"; 
      } 
     } 
    }, 
    title: { 
     enabled: true, 
     text: title, 
     style:{ 
      fontWeight:'bold' 
     } 
    }, 
    tickmarkPlacement: 'on', 
    plotLines: [{ 
     value: 0, 
     width: 2, 
     color: '#333333' 
    }] 
}], 
0

你可以在裏面標籤格式的新參數添加到您的Y軸,並使用此參數使用Axis.setTitle改變你的Y軸標題在回調函數()方法:http://api.highcharts.com/highcharts/Axis.setTitle

yAxis: { 
    labels: { 
    formatter: function() { 
     var chart = this.chart, 
     yAxis = chart.yAxis[0]; 
     maxDataValue = ((yAxis.dataMax * 8)/300)/1024; 
     if (maxDataValue < 1000) { 
     yAxis.titleText = "Mbps"; 
     return Math.floor(((this.value * 8)/300)/1024) + " Mbps"; 
     } else { 
     yAxis.titleText = "Gbps"; 
     return Math.floor(((this.value * 8)/300)/1048576) + " Gbps"; 
     } 
    } 
    } 
}, 


function(chart) { 
    var yAxis = chart.yAxis[0], 
     titleText = yAxis.titleText; 
    yAxis.setTitle({ 
     text: titleText 
    }); 
    } 

在這裏,您可以找到現場實例如何運作:http://jsfiddle.net/orgtn6xq/1/