Вопрос по dc.js, pie-chart, legend – Добавить легенду на круговую диаграмму в dc.js
m построение визуализации на основе dc.js, где одной из диаграмм является круговая диаграмма. Увидеть:
http://jsfiddle.net/luiseth/t8we6/
Особенность моего случая в том, что метки, которые будут отображаться на этом графике, обычно довольно длинные, настолько большие, что обычно обрезаются графиком ».контейнер (). Поэтому я подумал о том, чтобы они появились в легенде, но у меня нетя не мог понять, как сделать так, чтобы легенда появилась справа от диаграммы. Как я могу это сделать? Играя сwidth не помогло вообще, так как график располагается в центре.
Мой код на данный момент:
chart.width(500)
.height(180)
.radius(80)
.dimension(categoryDimension)
.group(categoryGroup)
.legend(dc.legend().x(140).y(0).gap(5));
Плюс.label Директива о замене этикетки в процентах.
и это, похоже, работает:
Круговая диаграмма создает холст SVG на основе ширины, которую вы объявляете, а затем размещает ее в центре. Я нацелился на холст SVG, добавил другую ширину, и он отобразился. Смещение метки за холст делает его скрытым.
Так что если ваша круговая диаграмма имеет ширину 200 и идентификатор "круговая диаграмма"и вы хотите добавить дополнительные 150 пикселей для учета метки, попробуйте следующий CSS:
#piechart svg { width: 350px; }
Не забудьте учесть эту ширину в макете страницы.