你能为dc.js气泡图添加一个图例吗？

Question

Is it possible to make a legend for Bubble Chart?

几年前有人问过这个问题，但我找不到合适的答案。有没有人举例说明他们使用dc.js制作气泡图的图例？

Answer 1

您可以通过定义.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
     };
   });
 };

1. 提供要在图例中显示的特定值
2. 图例需要参考图表
3. 指定每个值的标签 - 我只是使用值本身
4. 给一种颜色。这是最复杂的部分。您可以直接指定颜色，但我认为使用图表使用的颜色功能（比例）会更好。这意味着您必须生成看起来像您的组值的人工数据。这里colorAccessor期望查看d.value.absGain，以便我们构建看起来像这样的数据。

在此之后，将图例添加到图表是完全正常的：

 yearlyBubbleChart.legend(dc.legend().x(600).y(20));



Demo fiddle