我有一个简单的图表,其中只有三个条形。我想使用 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();
编辑:多亏了戈登,现在显示了正确的总和,但在选择条形图时它并没有改变。现在,致力于此。
最佳答案
为您的 numberDisplay 组使用 XDimension.groupAll()
,而不是 YDimension。这是一个特殊的组,只有一个 bin,包含所有过滤后的记录。
https://github.com/square/crossfilter/wiki/API-Reference#dimension_groupAll
关于javascript - dc.js 中的 numberDisplay 显示行图表中值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25209533/