个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
26
4
我有一个条形图，其 x 轴为序号刻度。我想在每个条形的顶部或每个条形的底部显示 y 值。当鼠标悬停在条上时显示 y 值也是可以接受的。 dc.js 中是否有函数或方法可以做到这一点？这是 jsfiddle我的代码在图片下方>
编辑:这是我的代码:HTML
<body>
<div id='Chart'>
</div>
</body>
JS
var data = [{
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "1"
}, {
Category: "A",
ID: "2"
}, {
Category: "A",
ID: "2"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "1"
}, {
Category: "B",
ID: "2"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "3"
}, {
Category: "B",
ID: "4"
}, {
Category: "C",
ID: "1"
}, {
Category: "C",
ID: "2"
}, {
Category: "C",
ID: "3"
}, {
Category: "C",
ID: "4"
}, {
Category: "C",
ID: "4"
},{
Category: "C",
ID: "5"
}];
var ndx = crossfilter(data);
var XDimension = ndx.dimension(function (d) {
return d.Category;
});
var YDimension = XDimension.group().reduceCount(function (d) {
return d.value;
});
dc.barChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.label(function(d) {return d.value})
.x(d3.scale.ordinal().domain(XDimension))
dc.renderAll();
最佳答案
检查更新jsfiddle
.renderlet(function(chart){
var barsData = [];
var bars = chart.selectAll('.bar').each(function(d) { barsData.push(d); });
//Remove old values (if found)
d3.select(bars[0][0].parentNode).select('#inline-labels').remove();
//Create group for labels
var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id','inline-labels');
for (var i = bars[0].length - 1; i >= 0; i--) {
var b = bars[0][i];
//Only create label if bar height is tall enough
if (+b.getAttribute('height') < 18) continue;
gLabels
.append("text")
.text(barsData[i].data.value)
.attr('x', +b.getAttribute('x') + (b.getAttribute('width')/2) )
.attr('y', +b.getAttribute('y') + 15)
.attr('text-anchor', 'middle')
.attr('fill', 'white');
}
})
如果您不希望重绘条形图时标签可见(例如，当用户过滤/单击其他图表后条形图发生变化)，您可以将旧值的检查从 de renderlet 移动到 preRedraw。听众。
.on("preRedraw", function(chart){
//Remove old values (if found)
chart.select('#inline-labels').remove();
})
D3-ish 方式
演示 jsfiddle
.renderlet(function (chart) {
//Check if labels exist
var gLabels = chart.select(".labels");
if (gLabels.empty()){
gLabels = chart.select(".chart-body").append('g').classed('labels', true);
}
var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]);
gLabelsData.exit().remove(); //Remove unused elements
gLabelsData.enter().append("text") //Add new elements
gLabelsData
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.text(function(d){
return d3.select(d).data()[0].data.value
})
.attr('x', function(d){
return +d.getAttribute('x') + (d.getAttribute('width')/2);
})
.attr('y', function(d){ return +d.getAttribute('y') + 15; })
.attr('style', function(d){
if (+d.getAttribute('height') < 18) return "display:none";
});
})
关于javascript - 在条形图中的条形顶部显示值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25026010/
26
4
0
有人知道如何在数组字段中插入以竖线/竖线分隔的数组吗？ 逗号可以正常工作，但是当我将其更改为 bar 时，它会产生错误“格式错误的数组文字” 示例(有效): insert into table (ar
我尽力阅读与我的问题相关的问题。最相关的是:question .但是我无法弄清楚如何解决我的问题。我有一个像这样的数据集 structure(list(COMPANY = structure(1
在使用 matplotlib 挣扎了比我想承认的时间更长的时间之后，我试图在我使用过的几乎任何其他绘图库中做一些轻而易举的事情，我决定向 Stackiverse 寻求一些见解。简而言之，我需要的是创建
如何实现带有条形样式的 Activity 指示器。根据以下文档http://developer.android.com/design/building-blocks/progress.html “Ac
我正在尝试使用数组中的数据制作水平条形图 $values = implode(',', array_values($type)); $labels = implode('|', array_keys(
这个问题在这里已经有了答案: Two-tone background split by diagonal line using css (7 个答案) Create a slanted edge
我正在处理一个范围非常大的图表，我发现条形图偏离了轴。我怎样才能阻止这个？这是我在教程中编写的一个示例，因为我的数据是通过读取大量文件获取的。这说明了我遇到的问题。我给出了标准差，意味着一个很大的范围
我在 Swift 2.2 中创建了一个 UIProgressView(条形)，现在想改变它的高度。其他一些帖子建议使用 CGAffineTransformScale 来更改高度。但是，出于某种原因，这
我想在条形图上绘制两组具有不同比例的值。例如，对于一周中的每一天，我都有一个比例(比如那天同事迟到的比例)和一个值(他们平均迟到多长时间)。 这两个值可以绘制在两个单独的图表上，但将它们放在同一个图表
我想制作一个具有隐藏/显示功能的组合(线/条)图。我遇到的问题是我不知道如何指定索引更改(对于 javascript 来说是新的)这是我的示例(取消选中前两个复选框之一并重新选中它以查看问题): ht
我安装了 YCM(你完成了我)，当我编码时，我发现命令 $ 不工作。它不会跳到行尾，而是跳到最后一行。例如，a.cpp 中的一行: #include| 现在光标在 include 之后，然后我键
我想在条形图顶部显示自定义标签。 下面是我的 stacklabel 代码，这里的问题是我想在 stacklabel 的格式化程序中使用堆栈的类别名称，我该如何访问它。 stackLabels: {
我是一名优秀的程序员,十分优秀！