DC Composite图表包含动态图表

时间:2017-01-30 06:17:58

标签: dc.js

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中推送更多图表时会自动更新。我不需要手动放置每个图表。

基本上我想要像这样编写函数

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
    ])

1 个答案:

答案 0 :(得分:0)

您将.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)