我正在使用nvd3构建一个非常简单的条形图。我试图在条形图上添加数据标签。我添加了一个.selectALl部分,然而,数据标签仍然没有显示出来。如果您在我的代码中发现任何错误,请通知我。谢谢!
<div id="chart2" style="height:88%">
<svg ></svg>
<script>
var myData = {'Label': ['AC', 'BB', 'GS'], 'Price': [0.201, 0.251, 0.082]};
nv.addGraph(function() {
var chart2 = nv.models.multiBarChart()
.reduceXTicks(false) //If 'false', every single x-axis tick label will be rendered.
.rotateLabels(0) //Angle to rotate x-axis labels.
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.1) //Distance between each group of bars.
.stacked(false)
chart2.xAxis.rotateLabels(45);
chart2.yAxis
.tickFormat(d3.format(".1%"));
chart2.duration(500);
chart2.legend.maxKeyLength(100);
d3.select('#chart2 svg')
.datum(exampleData())
.call(chart2)
svg.selectAll("text")
.data(myData )
.enter()
.append("text")
.text(function(d) { return d.Price; })
.attr("x", function (d) { return xScale(d.Label) + xScale.range() / 2; })
.attr("y", function (d) { return yScale(d.Price) + 12; })
.style("fill", "white");
nv.utils.windowResize(chart2.update);
return chart2;
});
</script>
</div>