Вопрос по dc.js, pie-chart, legend – Добавить легенду на круговую диаграмму в dc.js

5

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 Директива о замене этикетки в процентах.

Ваш Ответ

1   ответ
5

и это, похоже, работает:

Круговая диаграмма создает холст SVG на основе ширины, которую вы объявляете, а затем размещает ее в центре. Я нацелился на холст SVG, добавил другую ширину, и он отобразился. Смещение метки за холст делает его скрытым.

Так что если ваша круговая диаграмма имеет ширину 200 и идентификатор "круговая диаграмма"и вы хотите добавить дополнительные 150 пикселей для учета метки, попробуйте следующий CSS:

#piechart svg { width: 350px; }

Не забудьте учесть эту ширину в макете страницы.

хоть и немного уродливый хак, это позволило должным образом контролировать и таблицу, и легенду. Спасибо Krishna Vedula
Работает отлично, спасибо! Теперь я хочу внести изменения в самом JS, но это фундаментальный вопрос. Еще раз спасибо! Luis E.

Похожие вопросы