【发布时间】：2018-11-02 23:06:56
【问题描述】：
Is it possible to make a legend for Bubble Chart?
几年前有人问过这个问题，但我找不到一个好的答案。有没有人举例说明他们在哪里使用 dc.js 为气泡图制作了图例？
【问题讨论】：
标签： legend dc.js bubble-chart
【发布时间】：2018-11-02 23:06:56
【问题描述】：
您可以通过定义.legendables() 函数手动将图例支持添加到任何还没有它的图表。尽管许多图表（例如饼图、折线图、条形图、散点图、旭日形图）都支持它，但默认返回一个空数组。
它可能未定义的一个原因是图表不一定知道要显示哪些值。但大概你会这样做，所以你可以手动指定它们。
例如，我将dc.js stock example 中的气泡图放在小提琴中，并像这样在legendables 中进行修补：
yearlyBubbleChart.legendables = function() {
return [500, 250, 0, -250, -500].map(function(v) { // 1
return {
chart: yearlyBubbleChart, // 2
name: v, // 3
color: yearlyBubbleChart.getColor({value: {absGain: v}}) // 4
};
});
};
- 给出要在图例中显示的具体值
- 图例需要引用回图表
- 为每个值指定标签 - 我只是使用值本身
- 给颜色。这是最复杂的部分。您可以直接指定颜色，但我认为最好使用图表使用的颜色函数（比例）。这意味着您必须生成看起来像您的组值的人工数据。这里
colorAccessor期望查看d.value.absGain，所以我们构建的数据看起来像这样。
在此之后，将图例添加到图表中是完全正常的：
yearlyBubbleChart.legend(dc.legend().x(600).y(20));
【讨论】：