我有一个综合图表,其中包含使用以下代码构建的两条线:
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 作为两个图表的标签之外,它呈现完美。在这里查看我的 fiddle :http://jsfiddle.net/8v9faput/
现在我在某处读到,您可以通过更改组来解决此问题:
.group(GROUP)
至
.group(GROUP, LABELNAME)
但是,一旦我这样做了,第二张图表的图例就变黑了,图表中的线条也消失了。如第二把 fiddle 所示。 http://jsfiddle.net/ojdg3ny1/
有什么想法为什么以及如何解决这个问题吗?我认为这可能与我使用假群组有关。
最佳答案
您正在向 .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();
更新了 fiddle :http://jsfiddle.net/reko91/8v9faput/1/
关于d3.js - 图例标签和颜色更改为黑色 dc.js d3.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35812884/