Rounding results in highcharts jquery script

2019-03-17 20:19发布

问题:

I know this is a bit out there... but gonna ask anyways. I'm using highcharts jquery script (http://www.highcharts.com/) to generate a pie chart. I am trying to round off the number results in the pie chart and cannot find any documentation to do so. I'm stuck!

My data looks something like this:

data: [
    ['Equity',   3],
    ['Cash',     6]
]

And the pie chart outputs: 33.333333333333 and 66.666666666666

I'd rather get the results rounded up and down respectively so it reads and shows 33 and 64. Does anyoone know how this can be set up in highcharts?

回答1:

In in the tooltip option in the configuration object use Math.round() in the formatter function.

   tooltip: {
     formatter: function() {
        return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
     }
  },


回答2:

tooltip: {
  valueDecimals: 2
},


回答3:

There's a numberFormatfunction available in the Highcharts API that you can use (see http://www.highcharts.com/ref/#highcharts-object).

Quoted from API doc:

numberFormat (Number number, [Number decimals], [String decimalPoint], [String thousandsSep]) : String

Formats a JavaScript number with grouped thousands, a fixed amount of decimals and an optional decimal point. It is a port of PHP's function with the same name. See PHP number_format for a full explanation of the parameters.

tooltip: {
    formatter: function() {
        return ''+ this.series.name +''+
            this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
    }
}, ...

Parameters

  • number: Number The raw number to format.
  • decimals: Number The desired number of decimals.
  • decimalPoint: String The decimal point. Defaults to "." or to the string specified globally in options.lang.decimalPoint.
  • thousandsSep: String The thousands separator. Defaults to "," or to the string specified globally in options.lang.thousandsSep.

Returns

A string with with the input number formatted.



回答4:

Instead of use formatter you can set yDecimals as 2:

tooltip: {
    yDecimals: 2
}

yDecimals: Number
How many decimals to show in each series' y value. This is overridable in each series' tooltip options object. The default is to preserve all decimals.



回答5:

tooltip: {
    formatter: function() {
        return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %';
    }
},


回答6:

try

percentageDecimals: 0 

in your tooltip