简体   繁体   English

Highcharts-动态设置yAxis标题

[英]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. 我想根据yAxis是显示Gbps还是Mbps动态设置yAxis的标题。

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选项的代码:

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. 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中,并使用此参数通过Axis.setTitle()方法在回调函数中更改yAxis标题: 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/ 在这里,您可以找到运行示例的实时示例: http : //jsfiddle.net/orgtn6xq/1/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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