Highcharts - 在兩列中顯示餅圖的圖例

Question

我一直在使用Highcharts（v2.1.9）來生成一些餅圖。 圖表生成得很好，但是我在顯示圖例方面遇到了一些問題。

圖例在垂直視圖中顯示，但不是顯示所有圖例項目，而是隱藏了一些圖例。 我相信這是由於導航選項被自動啟用，它會覆蓋容器內不適合的所有其他圖例項。

我想要在第二列中與第一列並排顯示它們，而不是分頁其余的圖例項。

此數據是動態的，因此圖例項/餅圖扇區的數量可能會隨時間而變化。 如果扇區增加，解決方案必須能夠處理兩個以上的列。

我認為關閉導航選項的一種方法是使用useHTML: true選項，但我無法按照我想要的方式設置它。

這是小提琴： http ： //jsfiddle.net/7fb3x9ys/

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({

                        chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                borderWidth: 0,
                                width: 800,
                                height: 280
                            },
                            credits: {
                                enabled: false
                            },
                            legend: {
                                borderWidth: 0,
                                labelFormatter: function() {
                                    var total = 0, percentage; 


                                        $.each(this.series.data, function() { 
                                        total+=this.y; 
                                        }); 
                                        percentage=((this.y/total)*100).toFixed(2); 
                                        return '<span style="color:#000000,font-size:12px !important;"><b>'+ this.name + '</b></span><br/><span style="color:#000000,font-size:12px !important;">'+percentage+'%</span>'; 
                                },                 
                                verticalAlign: 'middle',
                                x:185,
                                y:0,
                                layout: 'vertical',
                                width: 600,
                                height:280,
                                itemWidth: 600,
                                symbolWidth: 7,
                                symbolHeight: 28

                            },
                            title: {
                                text: ''
                            },
                            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    size: 275,
                                    center: ["16%", "50%"],
                                    dataLabels: {
                                        enabled: false,
                                    },
                                    showInLegend: true,
                                    minSize: 130,
                                    colors: [
                                    '#7DA0B0',
                                    '#9264AA',
                                    '#4F2A72',
                                    '#9A3968',
                                    '#BF5269',
                                    '#E16553',
                                    '#E3985E',
                                    '#E4BF80',
                                    '#75C494',
                                    '#52584B'
                                ]
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Sector',
                                data:{"data":[["ENERGY",17.4],["FINANCIALS",15.1],["CONSUMER STAPLES",14.9],["UTILITIES",14.88],["MATERIALS",7.59],["REAL ESTATE",7.24],["TELECOMMUNICATION SERVICES",7.08],["CONSUMER DISCRETIONARY",6.95],["INDUSTRIALS",5.28],["HEALTH CARE",2.64],["CASH",0.95]]}.data
                            }]


        });
    });

});

我想提前感謝所有回復。 我已經被困在這幾天了，任何幫助將不勝感激。

Answer 1

您可以嘗試水平布局圖例並將itemWidth設置為大於80的值。這對我itemWidth 。

示例 ：

legend: {
    itemWidth: 80
}