Highcharts馅饼传奇被剪掉了

时间:2014-03-12 00:18:03

标签: highcharts highstock

当饼图图例被分页时,图例第一行上的图例项目不会完全显示,会被剪掉

这里是fiddle,代码在这里:

function(){
    $('#container').highcharts({
       credits:{
          enabled:false
       },
       legend:{
          itemStyle:{
             fontFamily:'Arial',
             fontSize:'10pt'
          },
          maxHeight:55,
       },
       tooltip:{
          style:{
             fontFamily:'Arial',
             fontSize:'10pt'
          }
       },
       title:{
          style:{
             color:'#000000',
             fontFamily:'Arial'
          },
          text:'Pie legend problem',
          margin:50
       },
       chart:{
          renderTo:'container'
       },
       series:[
          {
             name:'Incident',
             type:'pie',
             data:[
                {
                   name:'Nadia Wilshire',
                   y:49,
                   color:'#73a8f0'
                },
                {
                   name:'ITIL User',
                   y:15,
                   color:'#318047'
                },
                {
                   name:'David Luie',
                   y:9,
                   color:'#f5c533',
                },
                {
                   name:'Don Godfire',
                   y:7,
                   color:'#004789',
                },
                {
                   name:'Bethline Angleen',
                   y:5,
                   color:'#f18320',
                },
                {
                   name:'Howard Johnwind',
                   y:3,
                   color:'#8f5699',
                },
                {
                   name:'Luke Smith',
                   y:3,
                   color:'#1e90ff',
                },
                {
                   name:'(empty)',
                   y:2,
                   color:'#3ed662',
                },
                {
                   name:'(empty2)',
                   y:2,
                   color:'#3ed662',
                },
                {
                   name:'(empty3)',
                   y:2,
                   color:'#3ed662',
                },
                {
                   name:'(empty4)',
                   y:2,
                   color:'#3ed662',
                },
             ]
          }
       ],
       exporting:{
          enabled:true
       },
       plotOptions:{
          pie:{
             cursor:'pointer',
             size:'95%',
             dataLabels:{
                enabled:false
             },
             showInLegend:true,
             tooltip:{
                pointFormat:'<b>{point.y}</b>'
             }
          }
       }
    });

1 个答案:

答案 0 :(得分:3)

通过 px 调整fontsize并相应地使用maxHeight。

legend:{
  itemStyle:{
    fontFamily:'Arial',
    fontSize:'13px'
},
maxHeight:58

DEMO:http://jsfiddle.net/Ly3Zr/