如何在nvd3 piechart中使工具提示标注整数

Question

这是我的代码：

 function graphDataAllChart(graphData) {
        $(".dataContentAllPie").empty();
nv.addGraph(function() {

  var chart = nv.models.pieChart()
                  .x(function(d) { return d.label })
                  .y(function(d) { return d.value })
                  .showLabels(true)     //Display pie labels
                  .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
                  .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
                  .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
                  .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
                ;

    d3.select("#chart2 svg")
        .datum(graphData)
        .transition().duration(350)
        .call(chart);

    return chart;
});

};

在这里，当饼图显示时，它以十进制格式显示数字，即显示类似于1564.00的值我想要的是消除小数点并使其看起来像1564

我尝试将标签修改为

.y(function(d) { return Math.round(d.value) })

但是没有达到预期的效果。

有人能在这方面帮我吗？

Answer 1

您可以使用nvd3库的valueFormatter属性。它在1.8或更高版本中可用。

 function graphDataAllChart(graphData) {
        $(".dataContentAllPie").empty();
nv.addGraph(function() {

  var chart = nv.models.pieChart()
                  .x(function(d) { return d.label })
                  .y(function(d) { return d.value })
                  .showLabels(true)     //Display pie labels
                  .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
                  .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
                  .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
                  .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
                  .tooltip.valueFormatter(d3.format('d')) // This will round the value without decimal. 
                ;

    d3.select("#chart2 svg")
        .datum(graphData)
        .transition().duration(350)
        .call(chart);

    return chart;
});

};

这对我来说很有效。只需通过这个问题也nvd3 tooltip decimal format

Answer 2

你需要像这样格式化你的轴--

function graphDataAllChart(graphData) {
  $(".dataContentAllPie").empty();
  nv.addGraph(function() {

  var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(true)     //Display pie labels
    .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
    .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
    .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
    .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
  ;

  chart.yAxis
    .tickFormat(d3.format(',0f'));

  chart.valueFormat(d3.format('d'));

  d3.select("#chart2 svg")
    .datum(graphData)
    .transition().duration(350)
    .call(chart);

    return chart;
  });
};