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

有没有办法将导航栏移动到底部并为图例提供更多空间，以便可以显示更多图例项目我如何实现这一目标？

我想通过移动导航栏在屏幕上显示至少3个项目

Answer 1

您可以移除图例周围的填充和边距，以占用更多空间。我发现填充为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/

在饼图（highcharts）中导航栏和图例之间添加空格

1 个答案: