分组条形图dc.js

时间:2015-11-10 13:40:37

标签: d3.js dc.js

我需要显示带有过滤功能的分组条形图。我在我的项目中使用带交叉过滤器的dc。

该图表存在于d3 js http://bl.ocks.org/mbostock/3887051;任何与dc.js一起实现的帮助都会很棒。我已经完成了Multi-series bar chart in DC-jshttps://github.com/dc-js/dc.js/issues/558,但它们并不完整。

我的要求是日期将是组,系统将是X轴,命中点将是Y轴。

我的数据如下。

data example

我想用 apo_loc作为X轴 hit_percentage作为Y轴制作 group by process_date ,但是我无法实现它。我已为hit_countmiss_counttotal填写了日期。请使用hit_percentagesystem与日期帮助我完成此操作。

    var dim = this.ndx.dimension(dimFun);
    var grp = dim.group().reduce(
            function (p, v) {
                p.hit_count += +v.hit_count;
                p.miss_count += +v.miss_count;
                p.total += +v.total;
                return p;
            },
            function (p, v) {
                p.hit_count -= +v.hit_count;
                p.miss_count -= +v.miss_count;
                p.total -= +v.total;
                return p;
            },
            function () {
                return {
                    hit_count: 0,
                    miss_count: 0,
                    total:0
                };
            }
      );

    bar.margins({
        top: 20,
        left: 30,
        right: 10,
        bottom: 20
    })
    .width(barWidth)
    .height(barHeight)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .brushOn(false)
    .dimension(dim)
    .renderLabel(true)
    .renderType("group")
     .group(grp, "Hit Point")
    .valueAccessor(function (d) {
        return d.value.hit_count;
    })
    .stack(grp, "Miss Point", function (d) {
        return d.value.miss_count;
    })  .stack(grp, "Total", function (d) {
        return d.value.total;
    });

enter image description here

0 个答案:

没有答案