将x轴范围更改为NVD3中子弹图的百分比

时间:2017-11-22 03:57:01

标签: nvd3.js

请帮助我如何将子弹图的x轴范围更改为百分比?

我有我的NVD3.js子弹图的代码

nv.addGraph(function() {
    var chart = nv.models.bulletChart();

    chart.tooltip.valueFormatter(function(d){
        return ''+ numberWithCommas(d)+''; //on hover show percentage and value
    });

    d3.select('#chart svg')
      .datum(data)
      .transition().duration(1000)
      .call(chart);

    return chart;
});

function numberWithCommas(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

这是我的数据变量

var data = {
   measureLabels: ["Total Obligated"]
   measures:[0]
   rangeLabels:["Available Amount"]
   ranges:[28464000]
   subtitle:"CODE"
  title:"200000100003000"
}

我试图添加此代码

chart.xAxis.tickFormat(function(d) {
        //return ranges * 100 / ranges
});

但它说'tickFormat'不是一个函数。

1 个答案:

答案 0 :(得分:0)

好的我弄清楚如何改变它LOL!。

我添加了这段代码。

d3.selectAll('g.nv-tick').select('text').text(function (t) {
    return (100 * t / data.ranges[0]).toFixed();
});
我花了半天的时间来弄清楚T_T