dc.js 呈现带有千位分隔符的标签

Question

我的仪表板中几乎没有条形图，我在条形图的顶部显示标签。
我的用户要求标签有千个分隔符。
原因是每个柱状图的数字超过 7 位甚至更多。
是否有任何解决方法来实现此功能？
这是我的代码：

Chart
  .width(1700)
  .height(200) 
  .margins({top: 5, left: 40, right: 20, bottom: 30})
  .transitionDuration(1000)
  .dimension(dateDim)
  //.formatNumber(d3.format(","))
  .group(dateGroup)
  .renderLabel(true)
  .brushOn(true)
  .elasticY(true)
  //.centerBar(true)
  //.x(d3.time.scale().domain([minDate,maxDate])) 
  .yAxisLabel("Trades per day")
  .xAxisLabel("Days")
  .ordinalColors(['#215979'])
  .x(d3.time.scale().domain([minDate, d3.time.day.offset(maxDate, 1)]))
  .yAxis().tickFormat(d3.format('s'));
Chart.xUnits(function(){return 30;});
Chart
        .on("postRedraw", function(chart, filter){
          window.globalActiveFilters.SelectedTradeCount=chart.filters().join(",")
        });

Answer 1

使用d3格式，相关文档可以在这里找到：https://github.com/d3/d3-format

示例用例（如上文link所示）：

d3.format(",")(20000)
-> "20,000"
d3.format(",")(200000000)
-> "200,000,000"

Answer 2

条形顶部的标签由 .label() 控制。

对于条形图，默认行为被覆盖以使用堆叠条形图的总 Y 值：

_chart.label(function (d) {
    return dc.utils.printSingleValue(d.y0 + d.y);
}, false);

(source link)

您可以按照@REEE 的建议指定您自己的使用 d3.format 的标签访问器，并为其提供总堆叠值：

.label(d => d3.format(',')(d.y0 + d.y1))

Example fiddle.

dc.js 呈现带有千位分隔符的标签

dc.js render labels with thousand seperator

d3.js

dc.js