您可以在dc.js气泡图中添加图例吗? [英] Can you add a legend to a dc.js Bubble Chart?

问题描述

是否可以气泡图的传奇?

几年前有人问这个问题，但是我找不到一个好的答案.有没有人举过一个例子，说明他们使用dc.js在气泡图中制作图例的原因?

Somebody asked this question a few years ago, but I cannot find a good answer for it. Does anybody have an example of where they made a legend for a bubble chart using dc.js?

推荐答案

您可以通过定义.legendables()函数将图例支持手动添加到尚无此图的任何图表中.尽管许多图表(例如饼图，折线图，条形图，散点图，朝阳图)都支持它，但是默认设置是返回一个空数组.

You can manually add legend support to any chart which does not have it already by defining the .legendables() function. Although many charts (e.g. pie, line, bar, scatter, sunburst) support it, the default is to return an empty array.

之所以未定义它的一个原因是，图表不一定知道要显示哪些值.但是大概可以，所以您可以手动指定它们.

One reason why it might not be defined is that a chart doesn't necessarily know which values to show. But presumably you do, so you can specify them manually.

作为示例，我从 dc.js股票示例中放入了气泡图放在小提琴中，然后在legendables中打补丁:

As an example, I've put the bubble chart from the dc.js stock example in a fiddle, and patched in legendables like this:

 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，因此我们构建的数据看起来像这样.

1. Give the specific values which you want to show in the legend
2. The legend needs a reference back to the chart
3. Specify the label for each value - I'm just using the value itself
4. Give a color. This is the most complicated part. You could just specify a color directly, but I think it's better to use the color function (scale) that the chart uses. This means you have to produce artificial data that looks like your group values. Here the colorAccessor expects to look at d.value.absGain so we build data that looks like that.

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

After this, adding the legend to the chart is completely normal:

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

演示小提琴

这篇关于您可以在dc.js气泡图中添加图例吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！