增加空間

Question

http://jsfiddle.net/6kjuf1aa/

Highcharts.chart('container', { 
    chart: {     
       width: 458, 
       height: 98 
      },    
      title: { 
       text: "" 
      }, 
      legend: { 
       align: 'center', 
       verticalAlign: 'middle',     
       layout: 'vertical'   
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 
      plotOptions: { 
       pie: { 

        startAngle: 0, 
        endAngle: 360, 
        center: ['10%', '80%'] 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'hi', 
       innerSize: '75%',     
       data: [ 
       { 
        y: 23, 
        name :"abc" 
       }, 
       { 
        y: 23, 
        name :"abc" 
       }, 
       { 
        y: 23, 
        name :"abc" 
       } 
       , 
       { 
        y: 23, 
        name :"abc" 
       }, 
       { 
        y: 23, 
        name :"abc" 
       }, 
       { 
        y: 23, 
        name :"abc" 
       } 

       ], 
       showInLegend: true 
      }] 
}); 

是否有移動的導航欄底部，並給出了傳說更多空間的方式，這樣可以顯示更多的圖例項 我如何做到這一點？

我想通過移動導航欄

Answer 1

您可以刪除空白和邊距周圍的傳說擁有它佔用更多的空間在屏幕上顯示至少3項。我發現填充0的圈子越來越剪裁，所以我也縮小了它們的尺寸。

legend: { 
    align: 'center', 
    verticalAlign: 'middle', 
    layout: 'vertical', 
    margin: 0, 
    padding: 0, 
    symbolHeight: 10, 
    verticalAlign: 'middle', 
    // maxHeight: 62 // If you really only want 3, uncomment this 
    }, 

http://jsfiddle.net/6kjuf1aa/1/