包含动态图表的 DC 综合图表

Question

var composite = dc.compositeChart("#test_composed");
var LineChart1 =  dc.lineChart(composite)
            .dimension(yearDim)
            .colors('yellow')
            .group(spendPerYear, "Top Line")
            .dashStyle([2,2])

var LineChart2 = dc.lineChart(composite)
            .dimension(yearDim)
            .colors('blue')
            .group(incomePerYear, "Bottom Line")
            .dashStyle([5,5])

var abc = [LineChart1, LineChart2];

composite
    .x(d3.scale.linear().domain([2011,2013]))
    .yAxisLabel("The Y Axis")
    .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .elasticY(true)
    .compose([
      //abc
    LineChart1, LineChart2
        ])
dc.renderAll();

所以这段代码有效。但是在 .compose 中如何包含 abc 数组，以便如果我在 abc 数组中推送更多图表，.compose 将自动更新。我不需要手动放置每个图表。

基本上我想要这样的 compose 函数

var abc = [LineChart1, LineChart2, LineChart3, LineChart4 ....];
composite
    .x(d3.scale.linear().domain([2011,2013]))
    .yAxisLabel("The Y Axis")
    .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .elasticY(true)
    .compose([
      abc
    ])

Answer 1

您将 .compose 作为 multi-dimensional 数组调用。请改用以下代码：

var abc = [LineChart1, LineChart2, LineChart3, LineChart4 ....];
composite
    .x(d3.scale.linear().domain([2011,2013]))
    .yAxisLabel("The Y Axis")
    .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .elasticY(true)
    .compose(abc)

包含动态图表的 DC 综合图表

DC Composite chart to include dynamic charts

dc.js