Jqplot formatString，用于将从数千到K的轴刻度转换。

I have some working Jqplot charts that I would like to truncate the 3 trailing zeros from numbers when they get into the thousands. For example, my chart would display axis ticks of 1,500, 15,000 and 150,000; but I would like it to say something like 1.5k, 15k, and 150k as the numbers sometimes get too long to display comfortably on my pages containing multiple charts.

我有一些Jqplot图表，我想在数字变成千位时，从数字中截去3个0。例如，我的图表显示的轴刻度分别是1500、15000和150000;但是我想说的是1.5k, 15k，和150k，因为数字有时候太长了，不能在包含多个图表的页面上舒适地显示出来。

I found from previous answers on this site that formatString in Jqplot uses the sprintf function, so I was playing around with some of those conversions listed on http://perldoc.perl.org/functions/sprintf.html but can't seem to get it quite right, but I'm not really familiar with the syntax of using them in a more complex way outside of the simple examples given.

从以前的答案在这个网站,我发现formatString Jqplot使用sprintf函数,所以我和一些转换在http://perldoc.perl.org/functions/sprintf.html上列出但似乎不能完全正确,但我不是很熟悉的语法使用它们以更复杂的方式以外的简单的例子。

Here is a simple code snippet example using formatString on the Y-Axis right now to insert a thousands separator. This is what I'm wondering can be modified in some way to covert thousands to 'K', or if there's another method I should be looking at.

下面是一个简单的代码片段示例，使用y轴上的formatString插入数千个分隔符。这就是我想知道的可以被修改成千位到K，或者是否有其他方法值得我研究。

options = {axes:{yaxis:{tickOptions:{formatString: "%'i"}}}}

$.jqplot('example',  [[[1,1000],[2,2000],[3,100000]]], options);

2 个解决方案

#1

So I was able to figure this out thanks to another post on here discussing formatString (JQplot Format String).

因此，由于本文中另一篇讨论formatString (JQplot格式字符串)的文章，我能够理解这一点。

It was suggested that instead of using formatString, that you can simply write your own tick formatter for Jqplot to use, which I wasn't aware of. So I wrote the following to achieve the conversion I was after (ex. 1,000 to 1.0K, 10,000 to 10K, 1,000,000 to 1.0M etc):

有人建议您不必使用formatString，只需编写自己的tick格式化程序，以便Jqplot使用，我对此并不知情。所以我写了下面的代码来实现我所追求的转换(例如:1000到1.0K, 10000到10K, 1,000,000到1.0M等等):

tickFormatter = function (format, val) {
    if (val >= 1000000) {
        val = val / 1000000;
    return val.toFixed(1)+"M";
    } 
    if (val >= 1000) {
        val = val / 1000;
            if (val < 10) {
                return val.toFixed(1)+"K";
            }
        return val.toFixed(0)+"K";
    }
    return val;
}

options = {axes:{yaxis:{tickOptions:{formatter: tickFormatter}}}}

$.jqplot('example',  [[[1,1000],[2,2000],[3,100000]]], options);

I'm fairly new so I'm sure someone more experienced could clean the formatter up a bit. But here's the working jsFiddle example: http://jsfiddle.net/planetxpress/jPexp/

我是一个新手，所以我相信更有经验的人可以稍微清理一下。但这里有一个正在运行的jsFiddle示例:http://jsfiddle.net/planetxpress/jPexp/

#2

I had to make a simple adjustment to allow for both positive and negative number formatting

我必须做一个简单的调整，以允许正负数字格式

                        tickFormatter = function (format, val) {
                        if (val >= 1000000 || val<-1000000) {  ///here
                            val = val / 1000000;
                            return val.toFixed(1)+"M";
                            } 
                        if (val >= 1000 || val<-1000) {  ///and here
                            val = val / 1000;
                                if (val < 10) {
                                    return val.toFixed(1)+"K";
                                }
                            return val.toFixed(0)+"K";
                        }
                        return val;
                    }

#1