dc.js：将总计添加到条形图 [英] dc.js: Adding Totals to Bar Chart

问题描述

我正在尝试在dc.js中创建条形图，并在图表末尾添加总计标签。现在，我找不到任何关于参数或函数的文档，以便允许它发生。

I'm trying to create a bar chart in dc.js with the totals label at the end of the charts. Right now, I can't find any documentation on parameters or functions to pass through that'll allow it to happen.

任何帮助都将不胜感激！

Any help would be greatly appreciated!

推荐答案

戈登，你说这是问题！

但是，我发现答案无效，因为 .renderlet 链接被删除了。这是一个重新设计的版本，对我有用（有点，如果条形图太小，它仍然没有出现问题）。

However, I found the answer didn't work because .renderlet chaining was removed. Here's a reworked version of it that worked for me (kinda, there is still issue of it's not showing up if the bars are too small).

谢谢你的一切！ / p>

Thanks for everything!

  testChart
  .width(400)
  .height(200)
  .dimension(testDim)
  .group(testGroup)
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)

  testChart.on('renderlet', function (chart) {

    var barsData = [];
    var bars = chart.selectAll('.bar').each(function (d) {
      barsData.push(d);
    });

    //Remove old values (if found)
    d3.select(bars[0][0].parentNode).select('#inline-labels').remove();
    //Create group for labels
    var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id', 'inline-labels');

    for (var i = bars[0].length - 1; i >= 0; i--) {

      var b = bars[0][i];
      //Only create label if bar height is tall enough
       if (+b.getAttribute('height') < 10) continue;

      gLabels.append("text")
          .text(barsData[i].data.value)
          .attr('x', +b.getAttribute('x') + (b.getAttribute('width') / 2))
          .attr('y', +b.getAttribute('y') + 25)
          .attr('text-anchor', 'middle')
          .attr('fill', 'black');
    }
  });

这篇关于dc.js：将总计添加到条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！