如何将数据标签添加到nvd3条形图?

时间:2017-08-24 23:57:07

标签: javascript html d3.js svg nvd3.js

我正在使用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>

0 个答案:

没有答案