本文介绍了dc.js:将总计添加到条形图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在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:将总计添加到条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!