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
}