Question

我使用离散条形图（NVD3库）在我的网站中显示图表。虽然显示图表一切都很好，但我的问题是如何将十进制值更改为整数。在y轴上显示的值显示整数值。虽然我用哪个数组显示具有整数值的值。我使用的js代码在

之下

     nv.addGraph(function() {  
     var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(true)
    .tooltips(false)
    .showValues(true)
    .transitionDuration(250);
    chart.xAxis.axisLabel("<?php echo $configureGrid['x_axis']['legend']; ?>");
    chart.yAxis.axisLabel("<?php echo $configureGrid['y_axis']['legend']; ?>");
    d3.select('#issue_by_time svg')
    .datum(historicalBarChart)
    .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
    });
    });

Answer 1

使用此，

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

将小数值转换为y轴的整数

chart.xAxis.tickFormat(d3.format(',f'));

将小数值转换为x轴的整数

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

将小数值转换为整数，按图形输入

Answer 2

chart.valueFormat（d3.format（ 'd'））; 这显示了数据表中的确切值（可能是整数或浮点数）

显示您可以使用的showValue选项的确切值 .valueFormat（d3.format（）” 0' ）;

Answer 3

您不能直接在NVD3中执行此操作，但通过手动选择text元素并更改文本，您可以。生成图表后运行的以下代码将处理此问题。

d3.selectAll(".nv-y.nv-axis")
  .selectAll("text[text-anchor=end]")
  .text(function() { return Math.round(d3.select(this).text()); });

如何在“离散条形图”中更改整数中的小数值

3 个答案: