Dimple.js - 向条形图的每个条添加数据标签 [英] Dimple.js - Add data labels to each bar of the bar chart

问题描述

我使用dimple.js，它基于d3.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（）; 
 
 //绘制我们可以访问形状及其相关数据
 //添加标签
 s.shapes.each（function（d）{
 
 //获取形状为d3选择
 var shape = d3.select（this），
 
 //从标度获取高度和宽度
 height = myChart.y + myChart.height  -  y。 _scale（d.height）; 
 width = x._scale（d.width）; 
 
 //为值
添加文本标签svg.append（text ）
 
 //位置在形状的中心（垂直位置为
 //由于跨浏览器与基线的问题而手动设置）
 .attr（x parseFloat（shape.attr（x））+ width / 2  -  15）
 .attr（y，parseFloat（shape.attr（y）） -  height / 2）
 
 //中心对齐
 .style（text-anchor，middle）
 .style（font-size，10px）
 .style - sans-serif）
 
 //让它有点透明的黑色
 .style（opacity，0.7）
 
 //格式化数字
 .text（d3.format（，。1f）（d.yValue / 1000）+k）; 
}）; 
}）; 
< / script> 
  

p>

I am using dimple.js, which is based on d3.js. Is it possible to add data labels to each bar of the bar chart mentioned in this example 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>

Like added on http://mbostock.github.io/d3/tutorial/bar-1.html

解决方案

Yes, it is very much possible.

In the "Advanced bar labels" section on the Dimple.js website, they show an example of this. Click here to see it.

I used the same technique to add bar labels to the snippet you posted.

Notice: I kept the comments pretty much the same, so that you can understand what is going on the code. Also, I changed the size of the chart for testing purposes.

Try this out:

<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>

Hope this helps!

这篇关于Dimple.js - 向条形图的每个条添加数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！