【问题标题】:numberDisplay in dc.js that shows the total sum of values in the row chartdc.js 中的 numberDisplay 显示行图中的值的总和
【发布时间】: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


    【解决方案1】:

    使用XDimension.groupAll() 作为您的 numberDisplay 组,而不是 YDimension。这是一个特殊的组,只有一个 bin,包含所有过滤的记录。

    https://github.com/square/crossfilter/wiki/API-Reference#dimension_groupAll

    【讨论】:

    • 谢谢,这主要是我想要的。虽然它确实显示了总和,但当我选择条形时它保持不变。例如,当我选择 bar A 和 B 时,它们的总和应该等于 13,但 numberDisplay 不变。您认为有内置功能还是必须破解?顺便更新了jsfiddle。
    • 啊哈,那么你实际上想要ndx.groupAll()。 crossfilter 对象上的函数观察所有过滤器,而维度上的函数只观察其他维度上的过滤器。 github.com/square/crossfilter/wiki/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-30
    • 2014-03-09
    • 1970-01-01
    • 2015-08-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多