【发布时间】:2014-10-02 06:57:06
【问题描述】:
我有一个简单的行图,里面只有三个条形。我想使用 dc.numberDisplay() 方法将条形值的总和显示为数字。我得到的只是其中一个酒吧的价值。关键是根据选择显示总数。例如,我选择 A 和 B,总数将显示 13。这是jsfiddle,我的代码如下:
HTML
<body>
<div id='Chart'>
<h4 id = "total">Number: </h4>
</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.rowChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension)
.label(function (d) {
return d.key + " " + d.value;})
.ordering(function (d) {
return -d.value});
dc.numberDisplay("#total")
.valueAccessor(function(d){return +d.value})
.group(YDimension);
dc.renderAll();
编辑:感谢 Gordon,现在显示了正确的总和,但在选择条形时它不会改变。现在,正在努力。
【问题讨论】:
标签: javascript d3.js dc.js crossfilter