Невозможно использовать свойство ShowInLegend вместе с drawTable в диаграммах highcharts

Question

Мне удалось визуализировать dataTable в блоке p ie диаграммы для моего Django приложения. Его можно найти здесь: http://jsfiddle.net/6vqzLo7h/

$(function () {
    
    Highcharts.setOptions({
    colors: [
      '#1cc88a', '#008a59', '#6adfb6'
    ]
  });
    
    Highcharts.drawTable = function() {
	    
	    // user options
	    var tableTop = 200,
	        colWidth = 60,
	        tableLeft = 50,
	        rowHeight = 20,
	        cellPadding = 2.5,
	        valueDecimals = 1,
	        valueSuffix = '';
	        
	    // internal variables
	    var chart = this,
	        series = chart.series,
	        renderer = chart.renderer,
	        cellLeft = tableLeft;

	    // draw category labels
	    $.each(series, function(serie_index, serie) {
	        renderer.text(
	            serie.name, 
	            cellLeft + cellPadding, 
	            tableTop + (serie_index + 1) * rowHeight - cellPadding
	        )
	        .css({
	            fontWeight: 'bold'
	        })       
	        .add();
	    });

	   
	       
	        $.each(series[0].data, function(i) {
	           
	            renderer.text(
	                    series[0].data[i].name, 
	                    cellLeft + colWidth - cellPadding, 
	                    tableTop + (i + 2) * rowHeight - cellPadding
	                )
	                .attr({
	                    align: 'right'
	                })
	                .add();
            });
         $.each(series[0].data, function(i) {
	            renderer.text(
	                    Highcharts.numberFormat(series[0].data[i].y, valueDecimals) + valueSuffix, 
	                    150, 
	                    tableTop + (i + 2) * rowHeight - cellPadding
	                )
	                .attr({
	                    align: 'left'
	                })
	                .add();
	     
	        });
	        
	    
	        
	}
    
    
    
    
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            events: {
	            load: Highcharts.drawTable
	        },
            height: 600,
            width: 800,
	        marginBottom: 250
        },
        title: {
            text: undefined
          },
        credits: {
          enabled: false
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
           			showInLegend: true,
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                            verticalAlign: 'top',
                            enabled: true,
                            color: '#000000',
                            connectorWidth: 1,
                            distance: -50,
                            connectorColor: '#000000',
                            format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
                          }
            }
        },
        series: [{
            type: 'pie',
            name: 'Vulnerability Counts',
            data: [{
                      y: 4,
                      name: 'high',
                    }, {
                      y: 8,
                      name: 'medium',
                    }, {
                      y: 2,
                      name: 'low'
                    }]
        }]
    });
});
    

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Однако я не могу отобразить поле легенды, поскольку showInLegend: true не отображается. Его нужно показать вместе с таблицей данных.

Answer 1

Функция showInLegend работает нормально, но ваши настройки размеров вытолкнули легенду за пределы контейнера.

Демо: http://jsfiddle.net/BlackLabel/d36fmcj5/

chart: {
  //plotBackgroundColor: null,
  //plotBorderWidth: null,
  //plotShadow: false,
  events: {
    load: Highcharts.drawTable
  },
  height: 400,
  width: 800,
  //marginBottom: 250
},