DC-js中的多系列条形图 [英] Multi-series bar chart in DC-js

问题描述

我使用 DC.js （在D3之上的lib），有一个单一系列条形图的一个很好的例子：

  var xf = crossfilter（data）; 
 var dim = xf.dimension（function（d）{return d [EmployeeName];}）; 
 var group = dim.group（）。reduceSum（function（d）{return d [AverageSale];}）; 
 
 var chart = dc.barChart（elm）; 
 chart.barPadding（0.1）
 chart.outerPadding（0.05）
 chart.brushOn（false）
 chart.x（d3.scale.ordinal（））; 
 chart.xUnits（dc.units.ordinal）; 
 chart.elasticY（true）; 
 
 chart.dimension（dim）.group（group）; 
 chart.render（）; 
  

但我想知道是否可以使用这个库创建一个多维条形图。例如：按商店名称分组，然后按员工分组，然后y轴显示平均销售价值（已由我的后端计算）。

数据如下：

  [{
EmployeeName：Heather，
StoreName：Plaza，
AverageSaleValue：200 
} {
EmployeeName：Mellisa，
StoreName：Plaza，
AverageSaleValue：240 
} ，{
EmployeeName：Sarah，
StoreName：Oak Park，
AverageSaleValue：300 
} ...] / code> 




解决方案

如果您有静态数量的图表组，效果与复合图表。

在下面的例子中，我硬编码条形图之间的差距 - 我可以这样做，因为我知道有12个月被显示。

  var actuals = dc.barChart（compositeChart）
 .gap（65）
 .group（group）
。 valueAccessor（function（d）{
 return d.value.Actual; 
}）; 
 
 var budgets = dc.barChart（compositeChart）
 .gap（65）
 .group（group）
 .valueAccessor（function（d）{
 return d.value.Budget; 
}）; 
  

我将这些条形图传递给复合图表的compose方法：

  compositeChart 
 .width（1000）
 .height（300）
 .dimension（monthDimension）
。 group（group）
 .elasticY（true）
 .x（d3.time.scale（）。domain（timeExtent））
 .xUnits（d3.time.months）
 .bond（d3.time.month.round）
 .renderHorizo​​ntalGridLines（true）
 .compose（[budget，actuals]）
 .brushOn（true）; 
  

最后，我添加一个renderlet来将其中一个图表向右移动几个像素： p>

  compositeChart 
 .renderlet（function（chart）{
 chart.selectAll（g._1）。 attr（transform，translate（+ 1 +，0））; 
 chart.selectAll（g._0 0））; 
}）; 
  

我知道这不是最简单的方法，但它可以工作在夹点。

我希望这有助于。

I'm using DC.js ( lib on top of D3 ) and have a great example of a single series bar chart:

 var xf = crossfilter(data);
 var dim = xf.dimension(function (d) { return d["EmployeeName"]; });
 var group = dim.group().reduceSum(function (d) { return d["AverageSale"]; });

 var chart = dc.barChart(elm);
 chart.barPadding(0.1)
 chart.outerPadding(0.05)
 chart.brushOn(false)
 chart.x(d3.scale.ordinal());
 chart.xUnits(dc.units.ordinal);
 chart.elasticY(true);

 chart.dimension(dim).group(group);
 chart.render();

but I was wondering if it was possible to create a multi dimensional bar chart using this library. For example: Group by Store Name then Group By Employee then y-axis display average sale value ( already calculated by my backend ).

The data looks like:

 [{
    "EmployeeName": "Heather",
    "StoreName" : "Plaza",
    "AverageSaleValue": 200
 }{
    "EmployeeName": "Mellisa",
    "StoreName" : "Plaza",
    "AverageSaleValue": 240
 }, {
    "EmployeeName": "Sarah",
    "StoreName" : "Oak Park",
    "AverageSaleValue": 300
 } ... ]

解决方案

If you have a static number of groups to graph, you can achieve the desired effect with a composite chart.

In the example below, I hard coded the gap between the bar charts - I can do this because I know there are 12 months being displayed.

            var actuals = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Actual;
                    });

            var budgets = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Budget;
                    });

I pass these bar charts to the compose method of a composite chart:

                compositeChart
                    .width(1000)
                    .height(300)
                    .dimension(monthDimension)
                    .group(group)
                    .elasticY(true)
                    .x(d3.time.scale().domain(timeExtent))
                    .xUnits(d3.time.months)
                    .round(d3.time.month.round)
                    .renderHorizontalGridLines(true)
                    .compose([budgets, actuals])
                    .brushOn(true);

Finally, I add a renderlet to move one of the charts to the right a few pixels:

              compositeChart
                    .renderlet(function (chart) {
                        chart.selectAll("g._1").attr("transform", "translate(" + 20 + ", 0)");
                        chart.selectAll("g._0").attr("transform", "translate(" + 1 + ", 0)");
                    });

I know this isn't the cleanest approach but it can work in a pinch.

I hope this helps.

这篇关于DC-js中的多系列条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！