基于dc.js组合图中条形的颜色的自定义图例 [英] Custom legend based on color of bars in a dc.js composite chart

问题描述

我实现了一个包含两个条形图的复合图，其中一个条形图由具有不同颜色条形的条形组成. 现在，我想创建一个代表每个颜色条的自定义图例(类似于

I implemented a composite chart with two bar charts in which one bar chart consists of bars with different colored bars. Now, I want to create a custom legend that represents each color bar (similar to https://dc-js.github.io/dc.js/examples/pie-external-labels.html used for pie chart). Below is the code snippet of what I've done so far:

var buttonPress = dc.barChart(composite)
    .dimension(joyTimeDimension)
    //.renderlet(colorRenderlet)
    //.colors('red')
    .colors(colorbrewer.Set1[5])
    .colorDomain([101, 105])
    .colorAccessor(function (d) {
        return d.value;
    })
    .group(btnGroup, "Button Press")
    .keyAccessor(function(d) {return d.key[0];})
    .valueAccessor(function (d) {
        return d.value;
    })
    .title( function(d){ 
        return [
            "Time: "+d.key[0],
            "button Name: "+d.key[1],
            "button: "+ d.value
        ].join('\n')
    });


var joyStick = dc.barChart(composite)
    .dimension(joyTimeDimension)
    .colors('blue')
    .group(stepperGroup,"Joy Stick Movement")
    .keyAccessor(function(d) {return d.key[0];})
    .title( function(d){ 
        return [
            "Time: "+d.key[0],
            "Stepper Position: "+ d.value
        ].join('\n')
  });
  composite
    .width(1200)
    .transitionDuration(500)
    .margins({top: 30, right: 50, bottom: 25, left: 40})
    .x(d3.time.scale().domain([startDate,currDate]))
    .xUnits(function(){return 150;})
    //.xUnits(d3.time.second)
    .elasticY(true)
    .legend(dc.legend().x(1000).y(4).itemHeight(13).gap(5))
    .renderHorizontalGridLines(true)
    .renderTitle(true)
    .shareTitle(false)
    .compose([buttonPress, joyStick])
    .brushOn(false)

是否可以为这种情况创建自定义图例? 预先感谢.

Is there a way to create a custom legend for this scenario? Thanks in advance.

推荐答案

让我提供一些有关图例构建方式的背景.

Let me provide a little bit of background about how the legend is built.

dc.js中的图例实际上并不是那么复杂.它只是在图表上调用.legendables()，然后图表决定在图例中显示哪些项目.

The legend in dc.js is really not all that sophisticated. It just calls .legendables() on the chart, and the chart decides what items to display in the legend.

每个图表对此都有自己的专用代码.

Each chart has its own special-purpose code for this.

如果我们看

If we look at the source for compositeChart.legendables(), it's just recursively getting the legendables for each child chart and concatenating them:

_chart.legendables = function () {
    return _children.reduce(function (items, child) {
        if (_shareColors) {
            child.colors(_chart.colors());
        }
        items.push.apply(items, child.legendables());
        return items;
    }, []);
};

饼图为每个饼图创建一个传奇的图片:

_chart.legendables = function () {
    return _chart.data().map(function (d, i) {
        var legendable = {name: d.key, data: d.value, others: d.others, chart: _chart};
        legendable.color = _chart.getColor(d, i);
        return legendable;
    });
};

条形图的图例来自堆栈mixin，其中

The legendables for the bar chart come from the stack mixin, which creates a legendable for each stack:

_chart.legendables = function () {
    return _stack.map(function (layer, i) {
        return {
            chart: _chart,
            name: layer.name,
            hidden: layer.hidden || false,
            color: _chart.getColor.call(layer, layer.values, i)
        };
    });
};

鉴于目前无法获得条形图以显示饼图的图例，我认为最简单的方法是使用自定义颜色覆盖条形图的legendables

Given that there's currently no way to get a bar chart to display a pie chart's legend, I think the easiest thing to do is override legendables for your bar chart with its custom colors:

buttonPress.legendables = function() {
    return btnGroup.all().map(function(kv) {
        return {
            chart: buttonPress,
            // display the value as the text (not sure what you want here)
            name: kv.value,
            // apply the chart's color scale to get the color
            color: buttonPress.colors()(kv.value)
        };
    })
};

可能还有更多细节有待解决，例如，如果相同的值出现两次，该怎么办?我假设您可以只读取组中的输入数据并.map()，但是您可能需要以其他方式生成数据.

There are probably some more details to be worked out, such as what if the same value occurs twice? I am assuming you can just read the input data from the group and .map() it, but you might need to generate your data a different way.

但是，这应该给出总体思路. Lmk如果它不起作用，我很乐意跟进.

But this should give the general idea. Lmk if it doesn't work and I'll be glad to follow up.

这篇关于基于dc.js组合图中条形的颜色的自定义图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！