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。这对我很有效。

示例：

legend: {
    itemWidth: 80
}