Highcharts：是否可以顯示類似於餅圖傳說的Sunburst傳說？

目前，關於在Highcharts中啓用旭日圖表的傳說，單個系列標籤在圖例中出現。請參閱以下JSFiddle：http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/Highcharts：是否可以顯示類似於餅圖傳說的Sunburst傳說？

Highcharts餅圖圖例顯示圖例中的所有類別標籤。請參閱下面的餅圖傳說：http://jsfiddle.net/amrutaJgtp/wgaak302/

series: [{ 
name: 'Sales', 
colorByPoint: true, 
showInLegend: true, 
data: [{ 
    name: 'Consumer', 
    y: 2455 
}, { 
    name: 'Corporate', 
    y: 6802 
},{ 
    name: 'Home office', 
    y: 9031 
}, { 
    name: 'Small Business', 
    y: 5551 
}] 
}]

是否有可能以顯示旭日系列的所有數據點或至少類別 - 消費者，企業，家庭辦公，小型商業的傳奇？

來源

2017-10-17 Ams

這是我的理解旭日點（帶鑽）爲示圖表中的所有段的標籤 - 不是在傳說。 – wergeld

在我看來，答案是沒有。

請參考這個演示：http://jsfiddle.net/kkulig/u3p1usz9/

我試圖通過設置legendType = 'point'來實現這個功能（在API中沒有docummented，但它的作品），並覆蓋H.Legend.prototype.getAllItems，但似乎隱藏點旭日不支持。沒有辦法做到這一點 - 檢查出console.log輸出。使用visible屬性切換點的可見性也不起作用。傳說行爲正常，但對情節區域沒有影響。

解決方法

這個簡單的例子示出了如何以模仿所希望的圖例行爲：http://jsfiddle.net/kkulig/kn10kb7L/

首先我加入另外的兩個系列沒有數據：

{ 
    type: 'line', 
    name: 'p1', 
    color: 'blue' 
}, { 
    type: 'line', 
    name: 'p2', 
    color: 'blue' 
}

圖例的顏色物品標記需要通過設置「假」系列的顏色來手動處理。我爲每片葉子創建了visible標誌來控制其可見性。然後我用他們的legendItemClick回調函數過濾完整的數據集，並使用過濾的數據在第一個序列上執行setData。

legendItemClick: function(e) { 
     series = this; 
     data.forEach(function(leaf) { 
     if (leaf.id === series.name || leaf.parent === series.name) { 
      leaf.visible = !leaf.visible; 
     } 
     }); 
     this.chart.series[0].setData(data.filter((leaf) => leaf.visible)); 
    }

API參考：https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick

如果你認爲躲在點應在旭日系列來實現，你可以分享這個想法在這裏：https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api

更新

如果您想要發生動畫，請使用addPoint和removePoint而不是setData。

API參考：

來源

2017-10-18 14:15:51

非常感謝您的答覆。它有所幫助。我嘗試了添加虛擬系列和定義legendItemClick事件的解決方案。 JS小提琴：http://jsfiddle.net/amrutaJgtp/kn10kb7L/1/ 我想實現在實際sunburst圖表中顯示與最透明的最內圈的頂級相同。這裏隱藏點的條件不滿足。 JS小提琴：http://jsfiddle.net/amrutaJgtp/7r8eb5ms/19/ – Ams

Highcharts：是否可以顯示類似於餅圖傳說的Sunburst傳說？

回答

相關問題