2014-12-09 3 views
0

Я пытаюсь создать вложенную диаграмму пирога/пончика, где внутреннее кольцо отображает «группу» (например, производителя автомобиля), а внешнее кольцо отображает разбивку для этой «группы» (например, модели, изготовленные каждым производителем).Highcharts - вложенные нарезанные диаграммы пончиков

мне нужны отдельные сегменты для взрыва/нарезанный так, что она выглядит следующим образом:

http://imgur.com/TBtySVa

мне удалось получить эту работу, используя свойства sliced и slicedOffset (изображение выше на самом деле скриншот моей диаграммы), однако это создает странные эффекты (см. скрипку), когда меньше «групп».

Я собрал скрипку, чтобы показать, как диаграмма выглядит странно, когда на внутреннем кольце меньше групп. Это выглядит очень плохо, когда есть только один или два элемента во внутреннем кольце:

http://jsfiddle.net/danielcrisp/784jzLe2/

Я хотел бы знать, если есть лучший способ достижения результата я требую? Вероятно, sliced - это неправильный путь, поскольку он не предназначен для использования. Как еще я могу получить разрыв между пунктами?

Примечание: диаграмма будет отображаться над фотографией, поэтому я не могу использовать границы для создания эффекта.

Обновление: Это нормально, если расстояние между сегментами является регулярным, например. 10px, в отличие от нерегулярного интервала, показанного на первом снимке экрана.

Прозрачные рамки Должно быть быть идеальным решением, но они не маскируют цвет заполнения сегмента, к сожалению.

Спасибо!

ответ

1

Вы можете добавить несколько фиктивных точек данных, которые будут прозрачными. Это решение потребует некоторых расчетов для хороших визуальных результатов.

jsFiddle: http://jsfiddle.net/25acys4j/4/

Пример прозрачного среза:

{x: 0, 
y: 3, 
color: 'rgba(0,0,0,0)' 
}, 
+0

Спасибо, я думаю, что это как можно ближе получить ... это не идеально, но это нужно будет сделать сейчас –

0

Постарайтесь адаптировать диаграмму пончиков и оставьте это следующим образом: http://jsfiddle.net/25acys4j/. Граница может получить прозрачный цвет, когда вы определяете его как rgba();

+0

Прозрачные границы, кажется, не видно. Вот пример с желтым фоном, и вы увидите, что границы становятся невидимыми, поэтому нет интервала: http://jsfiddle.net/danielcrisp/25acys4j/1/ –

Смежные вопросы