2014-12-09 72 views
0

我正在嘗試創建一個嵌套的餅圖/甜甜圈圖表,其中內環顯示「組」(例如汽車製造商),外環顯示該「組」的細分例如由每個製造商製造的模型)。Highcharts - 嵌套的切片甜甜圈圖表

我需要的各段被爆炸/切片,使它看起來像這樣:

http://imgur.com/TBtySVa

我設法得到這個工作使用slicedslicedOffset屬性(上圖中實際上是爲我的圖表的屏幕截圖),但是當有更少的「組」時會產生奇怪的效果(請參閱小提琴)。

我已經整理了一個小提琴來演示如何在內環中存在較少的組時顯得很奇怪。它看起來非常糟糕時,只有在內圈的一個或兩個項目:

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

我想知道是否有獲得我需要的結果的一個更好的辦法?可能sliced不是正確的方式,因爲它不是它的預期用途。還有什麼我可以得到項目之間的差距?

注意:圖表將顯示在照片上,因此我無法使用邊框來創建效果。

更新:如果段之間的間距是規則的,例如,與第一個屏幕截圖中顯示的不規則間距不同。

透明邊框是一個完美的解決方案,但不幸的是它們不掩蓋段填充顏色。

謝謝!

回答

1

時,邊框可以獲得透明顏色您可以添加一些將爲透明的虛擬數據點。該解決方案需要一些計算以獲得良好的視覺效果。

的jsfiddle:透明片http://jsfiddle.net/25acys4j/4/

例子:

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

謝謝,我認爲這是儘可能接近我可以得到...這不是完美的,但它現在必須做 – 2015-01-12 14:35:46

0

嘗試調整甜甜圈圖表和邊框,如下所示:http://jsfiddle.net/25acys4j/。當您將其定義爲rgba();

+0

透明邊框似乎不可見。這裏是黃色背景的例子,你會看到邊框變得不可見,所以沒有間距:http://jsfiddle.net/danielcrisp/25acys4j/1/0 – 2014-12-09 13:45:37