highcharts yAxis纵轴单位问题

最新推荐文章于 2026-06-22 08:09:11 发布

原创最新推荐文章于 2026-06-22 08:09:11 发布 · 1.6w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

js 专栏收录该内容

10 篇文章

订阅专栏

在使用Highcharts制作图表时，遇到用户需求要按照中国习惯显示纵轴单位，如'亿'和'万'，而非'k'。通过修改highstock.js文件中涉及单位显示的代码，实现了根据数值自动切换单位的功能，成功解决了0后面不显示单位和使用中文单位的问题。

最近在使用highcharts做图表，其中用户有一个细节的要求，像下边左图这种纵轴坐标要求符合国人的习惯，如单位使用“亿”和“万”，而不是“k”，而且0k后面的"k"也取消，结果像下边右图一样。

yAxis: {
                title: {
                    text: 'Nuclear weapon states'
                },
                labels: {
                    formatter: function() {
                        return this.value / 1000 +'k';
                    }
                }

研究了一下，上述代码似乎达不到要求。

于是乎想到在js文件里修改，highstock.js这个文件有一段这样的代码：

var a=this.value,b=this.dateTimeLabelFormat;return b?wb(b,a):Da%1E6===0?a/1E6+"M":Da%1E3===0?a/1E3+"k":!Sa&&a>=1E3?Ub(a,0):a

可以看出他的代码原意，现根据需求修改如下：

var a=this.value,b=this.dateTimeLabelFormat;return a===0?0:(b?wb(b,a):Da%1E8===0?a/1E8+"亿":Da%1E4===0?a/1E4+"万":!Sa&&a>=1E4?Ub(a,0):a)

用中文单位以及0后面去掉单位的问题都能解决。