简体   繁体   中英

Highcharts - setting the yAxis title dynamically

I want top set the title of the yAxis dynamically depending on whether the yAxis are displaying Gbps or Mbps.

Can't find a formatter function for the title though and all the other ways I have tried have failed.

Any suggestions on how to do it?

This is the code for the yAxis options:

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'
              }]
            }],

Title of yAxis.

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'
    }]
}],

You can add new parameter to your yAxis inside labels formatter and use this parameter to change your yAxis title in your callback function using Axis.setTitle() method: 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
    });
  }

Here you can find live example how it can work: http://jsfiddle.net/orgtn6xq/1/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM