2017-07-25 17 views
0

http://jsfiddle.net/6kjuf1aa/円グラフ(highcharts)

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/

関連する問題