2017-07-25 96 views
0

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 
      }] 
}); 

是否有移动的导航栏底部,并给出了传说更多空间的方式,这样可以显示更多的图例项 我如何做到这一点?

我想通过移动导航栏

+0

你也可以减少itemStyle.fontSize,itemMarginTop和itemMarginBottom:http://jsfiddle.net/6m3arcs5/。 –

回答

0

您可以删除空白和边距周围的传说拥有它占用更多的空间在屏幕上显示至少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/