Javascript js-将数据标签添加到条形图的每个条形图中
我使用的是dimple.js,它基于d3.js。是否可以将数据标签添加到本示例中提到的条形图的每个条形图上Javascript js-将数据标签添加到条形图的每个条形图中,javascript,svg,d3.js,dimple.js,Javascript,Svg,D3.js,Dimple.js,我使用的是dimple.js,它基于d3.js。是否可以将数据标签添加到本示例中提到的条形图的每个条形图上 就像在上添加的一样,是的,这是非常可能的 在Dimple.js网站的Advanced bar labels部分中,他们展示了一个例子。去看看吧 我使用相同的技术将条形标签添加到您发布的代码段中 注意:我保留了几乎相同的注释,以便您能够理解代码中发生了什么。此外,为了进行测试,我更改了图表的大小 试试这个: <div id="chartContainer"> <script
就像在上添加的一样,是的,这是非常可能的 在Dimple.js网站的Advanced bar labels部分中,他们展示了一个例子。去看看吧 我使用相同的技术将条形标签添加到您发布的代码段中 注意:我保留了几乎相同的注释,以便您能够理解代码中发生了什么。此外,为了进行测试,我更改了图表的大小 试试这个:
<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>
希望这有帮助 是的,很有可能 在Dimple.js网站的Advanced bar labels部分中,他们展示了一个例子。去看看吧 我使用相同的技术将条形标签添加到您发布的代码段中 注意:我保留了几乎相同的注释,以便您能够理解代码中发生了什么。此外,为了进行测试,我更改了图表的大小 试试这个:
<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>
希望这有帮助 它帮助和超级修复!因为在这期间酒窝已经改善了很多,有没有任何变化,这是现在可以不写它自己,包括处理数据更新很好?它帮助和超级修复!由于同时dimple有了很大的改进,现在是否有任何改变,而无需亲自编写,包括很好地处理数据更新?