我有一个带有x轴顺序刻度的条形图.我想在每个条形图的顶部或每个条形图的底部显示y值.当一个悬停在条上时显示y值也是可以接受的.在dc.js中有功能或方法吗?这是
jsfiddle,我的代码低于图片>
编辑:这是我的代码:
HTML
<body> <div id='Chart'> </div> </body>
JS
var data = [{ Category: "A",ID: "1" },{ Category: "A",ID: "2" },{ Category: "B",ID: "3" },ID: "4" },{ Category: "C",ID: "5" }]; var ndx = crossfilter(data); var XDimension = ndx.dimension(function (d) { return d.Category; }); var YDimension = XDimension.group().reduceCount(function (d) { return d.value; }); dc.barChart("#Chart") .width(480).height(300) .dimension(XDimension) .group(YDimension) .transitionDuration(500) .xUnits(dc.units.ordinal) .label(function(d) {return d.value}) .x(d3.scale.ordinal().domain(XDimension)) dc.renderAll();
解决方法@H_502_13@
@H_301_14@
检查更新
jsfiddle
.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') < 18) continue;
gLabels
.append("text")
.text(barsData[i].data.value)
.attr('x',+b.getAttribute('x') + (b.getAttribute('width')/2) )
.attr('y',+b.getAttribute('y') + 15)
.attr('text-anchor','middle')
.attr('fill','white');
}
})
如果您不想在条形图重绘时看到标签(例如,当用户过滤/点击其他图表后条形更改),您可以将旧值的检查从de renderlet移至preRedraw
监听器.
.on("preRedraw",function(chart){ //Remove old values (if found) chart.select('#inline-labels').remove(); })
替代
D3-ish方式
演示jsfiddle
.renderlet(function (chart) { //Check if labels exist var gLabels = chart.select(".labels"); if (gLabels.empty()){ gLabels = chart.select(".chart-body").append('g').classed('labels',true); } var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]); gLabelsData.exit().remove(); //Remove unused elements gLabelsData.enter().append("text") //Add new elements gLabelsData .attr('text-anchor','middle') .attr('fill','white') .text(function(d){ return d3.select(d).data()[0].data.value }) .attr('x',function(d){ return +d.getAttribute('x') + (d.getAttribute('width')/2); }) .attr('y',function(d){ return +d.getAttribute('y') + 15; }) .attr('style',function(d){ if (+d.getAttribute('height') < 18) return "display:none"; }); })