Вы можете вручную добавить поддержку легенды к любой диаграмме, у которой ее еще нет, определив функцию .legendables().Хотя многие диаграммы (например, круговые, линейчатые, линейчатые, гистограммы, солнечные лучи) поддерживают его, по умолчанию возвращается пустой массив.
Одна из причин, по которой он не может быть определен, заключается в том, что диаграмма не обязательно знаеткакие значения показывать.Но, вероятно, вы это делаете, поэтому вы можете указать их вручную.
В качестве примера я поместил пузырьковую диаграмму из dc.js фондового примера *1007* в скрипку и пропатчил в 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));
Демонстрационная скрипка