js中的numberDisplay，显示行图中值的总和

numberDisplay in dc.js that shows the total sum of values in the row chart

本文关键字：中的 numberDisplay 显示 js      更新时间：2023-09-26

我有一个简单的行图，其中只有三个条形图。我想使用dc.numberDisplay()方法将条形条值的总和显示为一个数字。我得到的只是其中一个条的值。重点是显示基于选择的总数。例如，我选择A和B，总数将显示13。下面是jsfiddle，我的代码如下:

<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

相关文章：