Jqplot formatString用于将轴刻度从千位转换为K.

时间:2013-05-29 11:48:06

标签: jquery jqplot

我有一些正在运行的Jqplot图表,我想在它们进入数千时从数字中截断3个尾随零。例如,我的图表将显示1,500,15,000和150,000的轴刻度;但是我想说1.5k,15k和150k之类的东西,因为数字有时太长而无法在包含多个图表的页面上显示。

我从此网站上的先前答案中发现Jqplot中的formatString使用了sprintf函数,所以我正在玩http://perldoc.perl.org/functions/sprintf.html上列出的一些转换,但似乎无法正确使用它,但我我不太熟悉在给出的简单示例之外以更复杂的方式使用它们的语法。

这是一个简单的代码片段示例,现在使用Y轴上的formatString插入千位分隔符。这就是我想知道可以通过某种方式修改数千到'K',或者如果有另一种方法我应该看。

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

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

2 个答案:

答案 0 :(得分:3)

所以我能够解决这个问题,感谢另外一篇关于formatString(JQplot Format String)的帖子。

有人建议不要使用formatString,你可以简单地为Jqplot编写自己的tick格式器,我不知道。所以我写了以下内容来实现我追求的转换(例如1,000到1.0K,10,000到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);

我很新,所以我相信有经验的人可以稍微清理一下格式化程序。但这是工作的jsFiddle示例:http://jsfiddle.net/planetxpress/jPexp/

答案 1 :(得分:0)

我不得不做一个简单的调整,以允许正数和负数格式化

                        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;
                    }