2017-07-25 6 views
0

http://jsfiddle.net/6kjuf1aa/Hinzufügen Raum zwischen Navigationsleiste und der Legende in Kreisdiagramm (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 
      }] 
}); 

Gibt es eine Möglichkeit, die Navigationsleiste nach unten zu bewegen und mehr Platz für die Legenden zu geben, so dass mehr Legendenelemente angezeigt werden könnten Wie erreiche ich das?

Ich möchte durch Bewegen der Navigationsleiste

+0

Sie auch itemStyle.fontSize, itemMarginTop und itemMarginBottom reduzieren könnte: http://jsfiddle.net/6m3arcs5/. –

Antwort

0
mindestens 3 Elemente auf dem Bildschirm angezeigt werden

Sie können die Polsterung und Rand um die Legende entfernen, um es mehr Platz in Anspruch nehmen. Ich fand mit einem Padding von 0 die Kreise wurden abgeschnitten, also reduzierte ich ihre Größe auch.

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/

Verwandte Themen