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 
}