Highcharts rounding yaxis and xaxis digits

▼魔方 西西 提交于 2019-12-12 05:48:53

问题


I am trying to round yaxis and xaxis down. For example 3843 should be 3.843 on the graph and tooltip show 3.843 k.

I have got the tooltip working but cant get it to change the graphs yaxis and xaxis value so that the graph can show all sides fully.

As you can see here: http://jsfiddle.net/kzL0phfu/

This is what xaxis looks like

yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
  format: '{value:.2f}',
  style: {
    color: '#c4c4c4',
    font: '11px Trebuchet MS, Verdana, sans-serif'
  }
}
}

回答1:


Use dataLabels formatter to achieve desired result

  plotOptions: {
    area: {
      dataLabels: {
        useHTML: true,
        enabled: true,
        formatter: function() {
          value = this.y;
          numericSymbolDetector = Math.abs(this.y);
          if (numericSymbolDetector > 1000) {
            value = Highcharts.numberFormat(value / 1000, 3, '.', '') ;
          }
          return value
        },
        style: {
          color: '#c4c4c4',
          font: '5px Trebuchet MS, Verdana, sans-serif'
        }
      },
      //enableMouseTracking: false
    },
    series: {
      lineColor: '#808080'
    }
  },

Fiddle demonstration




回答2:


If you want to display yAxis labels the same way, get rid of the formatter from the yAxis.labels object (then the thousand prefix will display). In case you want to display exact values of the points as yAxis labels, you can update tickPositions array on load event and format them adequately. Take a look at the example below.

API Reference:
http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/yAxis.tickPositions

Example:
http://jsfiddle.net/ojno8rx1/



来源:https://stackoverflow.com/questions/45361290/highcharts-rounding-yaxis-and-xaxis-digits

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!