带有数字格式(单位)的高位图表
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有数字格式(单位)的高位图表相关的知识,希望对你有一定的参考价值。
我正在使用Highcharts生成折线图。
而且我在numberFormat
上遇到问题:
var test = 15975000;
numberFormat(test, 0,',','.');
结果是:15.975.000
但是我想将1000
转换为1k
,100000
转换为100k
,1000000
转换为1m
。我该如何解决这个问题?
答案
numberFormat在Highcharts对象中可用。
Highcharts.numberFormat(test, 0,',','.');
示例http://jsfiddle.net/DaBYc/1/
yAxis:
labels:
formatter: function ()
return Highcharts.numberFormat(this.value,0);
,
另一答案
formatter: function()
result = this.value;
if (this.value > 1000000) result = Math.floor(this.value / 1000000) + "M"
else if (this.value > 1000) result = Math.floor(this.value / 1000) + "k"
return result;
另请参见:How to format numbers similar to Stack Overflow reputation format
另一答案
您只需要这样做:
labels:
formatter: function()
return abbrNum(this.value,2); // Need to call the function for each value shown by the chart
,
这里是用于转换要在javascript上插入的数据的函数:
function abbrNum(number, decPlaces)
// 2 decimal places => 100, 3 => 1000, etc
decPlaces = Math.pow(10,decPlaces);
// Enumerate number abbreviations
var abbrev = [ "k", "m", "b", "t" ];
// Go through the array backwards, so we do the largest first
for (var i=abbrev.length-1; i>=0; i--)
// Convert array index to "1000", "1000000", etc
var size = Math.pow(10,(i+1)*3);
// If the number is bigger or equal do the abbreviation
if(size <= number)
// Here, we multiply by decPlaces, round, and then divide by decPlaces.
// This gives us nice rounding to a particular decimal place.
number = Math.round(number*decPlaces/size)/decPlaces;
// Handle special case where we round up to the next abbreviation
if((number == 1000) && (i < abbrev.length - 1))
number = 1;
i++;
// Add the letter for the abbreviation
number += abbrev[i];
// We are done... stop
break;
return number;
希望这项工作有效=)
另一答案
如果要格式化Highstock图表:
tooltip:
pointFormatter: function()
var result = this.y;
let header = '<table>';
let body = '<tr><td style = "color: ' + this.series.color + ';padding:0">'
+ this.series.name + ': </td><td style = "padding:0"><b>';
if (result > 1000000)
result = Math.floor(result / 1000000) + "M"
else if (result > 1000)
result = Math.floor(result / 1000) + "k"
return header + body + result + '</b></td></tr></table>';
,
我在不影响数据分组功能或日期的情况下找到一种添加数百万的方法很麻烦。
以上是关于带有数字格式(单位)的高位图表的主要内容,如果未能解决你的问题,请参考以下文章