Dimple.js-将数据标签添加到条形图的每个条形图中

Dimple.js - Add data labels to each bar of the bar chart

本文关键字：条形图 添加 js- 数据 标签 Dimple      更新时间：2023-09-26

我使用的是基于d3.js的酒窝.js。是否可以为本例中提到的条形图的每个小节添加数据标签http://dimplejs.org/examples_viewer.html?id=bars_vertical

<div id="chartContainer">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 510, 305)
      var x = myChart.addCategoryAxis("x", "Month");
      x.addOrderRule("Date");
      myChart.addMeasureAxis("y", "Unit Sales");
      myChart.addSeries(null, dimple.plot.bar);
      myChart.draw();
    });
  </script>
</div>

点赞添加于http://mbostock.github.io/d3/tutorial/bar-1.html

是的，这是非常有可能的。

在Dimple.js网站的"高级条形标签"部分，他们展示了一个例子。点击此处查看。

我使用了同样的技术将条形标签添加到您发布的片段中。

注意：我保留了几乎相同的注释，这样您就可以理解代码中发生了什么。此外，出于测试目的，我更改了图表的大小

试试这个：

<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 1100, 600);
    d3.tsv("/example_data.tsv", function(data) {
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 900, 400)
        var x = myChart.addCategoryAxis("x", "Month");
        x.addOrderRule("Date");
        var y = myChart.addMeasureAxis("y", "Unit Sales");
        var s = myChart.addSeries("Sales", dimple.plot.bar);
        myChart.draw();
        // After drawing we can access the shapes and their associated data
        // to add labels.
        s.shapes.each(function(d) {
            // Get the shape as a d3 selection
            var shape = d3.select(this),
            // Get the height and width from the scales
            height = myChart.y + myChart.height - y._scale(d.height);
            width = x._scale(d.width);
            // Add a text label for the value
            svg.append("text")
            // Position in the centre of the shape (vertical position is
            // manually set due to cross-browser problems with baseline)
            .attr("x", parseFloat(shape.attr("x")) + width / 2 - 15)
            .attr("y", parseFloat(shape.attr("y")) - height / 2)
            // Centre align
            .style("text-anchor", "middle")
            .style("font-size", "10px")
            .style("font-family", "sans-serif")
            // Make it a little transparent to tone down the black
            .style("opacity", 0.7)
            // Format the number
            .text(d3.format(",.1f")(d.yValue / 1000) + "k");
        });
    });
  </script>

希望这能有所帮助！

相关文章：