无法在Highcharts Piechart中将ShowInLegend属性与drawTable一起使用

Question

我成功地为我的Django应用程序在饼图div中呈现了一个dataTable。可以在这里找到：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，因此无法显示图例框。它需要与dataTable一起显示。

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
},