Question

我有一个复合图表，其中有两行使用以下代码构建：

function fakeGrouper(source_group) {
                return {
                    all:function () {
                        var cumulate = 100;
                        var result = [];
                        return [{key: 0, value: cumulate}]
                           .concat(source_group.all().map(function(d) {
                              cumulate -= d.value;
                              return {key:d.key, value:cumulate};
                           }));
                    }
                };
            }  

var recDim = cf1.dimension(dc.pluck('recidiefNa'));
                var recGroup = recDim.group().reduceCount();
                var RecGroup = fakeGrouper(recGroup);
                var resDim = cf1.dimension(dc.pluck('residuNa'));
                var resGroup = resDim.group().reduceCount();
                var ResGroup = fakeGrouper(resGroup);


            var scChart = dc.compositeChart("#scStepChart");
            scChart
            .width(600)
            .height(400)              
            .x(d3.scale.linear().domain([0,52]))
            .y(d3.scale.linear().domain([0,100]))
            .clipPadding(10)
            .brushOn(false)
            .xAxisLabel("tijd in weken")
            .yAxisLabel("percentage vrij van residu/recidief")
            .legend(dc.legend().x(70).y(250).itemHeight(13).gap(5))
            .compose([
                dc.lineChart(scChart)
                    .dimension(recDim)
                    .group(RecGroup)
                    .renderDataPoints(true)
                    .interpolate("step-after")
                    ,
                dc.lineChart(scChart)
                    .dimension(resDim)
                    .group(ResGroup)
                    .colors(['#ff9933'])
                    .renderDataPoints(true)
                    .interpolate("step-after")
                ])
            .xAxis().ticks(4);
            scChart.render();

除了图例为0以作为两个图表的标签这一事实外，其完美呈现。看看我的小提琴：http://jsfiddle.net/8v9faput/

现在我在某处读到你可以通过改变组来解决这个问题：

.group(GROUP)

到

.group(GROUP, LABELNAME)

然而，一旦我这样做，第二张图表在图例中变黑，并且图表中的线条消失了。如第二小提琴所示。 http://jsfiddle.net/ojdg3ny1/

任何想法为什么以及如何解决这个问题？我认为这可能与我使用假团体有关。

Answer 1

您正在传递.colors()数组。你应该像这样传递单个值：

.colors('#ff9933')

所以你的图表功能如下：

.legend(dc.legend().x(70).y(250).itemHeight(13).gap(5))
                .compose([
                    dc.lineChart(scChart)
                        .dimension(recDim)
                       .group(RecGroup, "Recidief")
                       .colors('red')
                        .renderDataPoints(true)
                        .interpolate("step-after")
                        ,
                    dc.lineChart(scChart)
                        .dimension(resDim)
                        .group(ResGroup, "Residu")
                        .colors('#ff9933')
                        .renderDataPoints(true)
                        .interpolate("step-after")
                    ])
                .xAxis().ticks(10)
                scChart.render();

更新了小提琴：http://jsfiddle.net/reko91/8v9faput/1/

图例标签和颜色变为黑色dc.js d3.js

1 个答案: