如何在人力车图上格式化Y轴值

时间:2013-03-08 14:11:46

标签: charts d3.js rickshaw

我想使用Javascript图表     http://code.shutterstock.com/rickshaw/

我让它工作一个例外,当我的值小于0.00000100然后y轴值以科学格式显示,例如2e-7的值为0.00000020

如何让它显示0.00000020而不是2e-7?

2 个答案:

答案 0 :(得分:4)

我没有使用过人力车,但是在主页上看这个例子:

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
} );

看起来您可以将函数传递给tickFormat。在这种情况下,传递formatKMBT,它看起来像这样:

Rickshaw.Fixtures.Number.formatKMBT = function(y) {
    var abs_y = Math.abs(y);
    if (abs_y >= 1000000000000)   { return y / 1000000000000 + "T" }
    else if (abs_y >= 1000000000) { return y / 1000000000 + "B" }
    else if (abs_y >= 1000000)    { return y / 1000000 + "M" }
    else if (abs_y >= 1000)       { return y / 1000 + "K" } 
    ...ect

从这里开始,您可以使用number formatters内置的d3或自己动手制作的d3。例如:

function yAxisFormat(d){ return d.toFixed(8); }

答案 1 :(得分:4)

以下是一个例子:

var yAxis = new Rickshaw.Graph.Axis.Y( {
            graph: graph,
            tickFormat: function(y){return y.toPrecision(3)}
        } );

你可以放置你想要的任何功能。