highcharts récipient demi-tarte trop grand

Question

J'ai un demi-camembert mais je veux que le récipient agisse comme si c'était un demi-camembert plutôt que de faire comme une tarte pleine qui cache la moitié. Ce que je veux dire par là, c'est que je ne veux pas que le récipient soit assez grand pour contenir la tarte entière, juste la moitié. Je voudrais ensuite mettre une légende personnalisée en dessous. Voici ce que je vois: http://jsfiddle.net/dangeruponu/bk2E5/

Voici mes options:

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      width: 400, 
      height: 400 
     }, 
     title: { 
      text: 
       '<div style="padding: 10px; color: white; background-color: #000000">' + 
        '<span style="font-size: xx-large">11</span><br/>' + 
        '<span>Total</span>' + 
       '</div>', 
      floating: true, 
      useHTML: true, 
      y: 100 
     }, 
     legend: { 
      symbolHeight: 0, 
      symbolWidth: 0, 
      floating: true, 
      useHTML: true, 
      labelFormat: '<div style="width: 80px; background-color: {color}; text-align: center; border: 2px solid"><span>{name}</span><br/><span style="font-size: larger">{y}</span></div>' 
     }, 
     tooltip: { 
      pointFormat: '{point.name}: {point.y}', 
      headerFormat: '' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       events: { 
        click: function(event){ 
         scope.$apply(urlService.url(event.point.page));         
        } 
       }, 
       selected: false, 
       startAngle: -90, 
       endAngle: 90, 
       innerSize: '90%', 
       showInLegend: true 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      data: [ 
       { 
        name: 'Re-work', 
        y: 4, 
        page: '', 
        color: '#7CB5EC' 
       }, 
       { 
        name: 'New', 
        y: 2, 
        page: 'NEW', 
        color: '#995CAC' 
       }, 
       { 
        name: 'In-progress', 
        y: 5, 
        page: '/orders/in_progress', 
        color: '#90ED7D' 
       } 
      ] 
     }] 
    }); 
}); 

Je me rends compte que je pouvais déplacer le centre vers le bas, mais j'aurais un grand bloc d'espace au sommet . Est-il possible d'ajuster le conteneur séparément de la carte?

Answer 1

Le centre vertical d'une tarte est de 50% par défaut. Donc, quand vous montrez uniquement la moitié supérieure, vous devez ajuster le centre vers le bas. http://api.highcharts.com/highcharts#plotOptions.pie.center. L'option size doit également probablement être définie.

Answer 2

Essayez de régler la hauteur première:

  height: 250 

Answer 3

vous pouvez déplacer la légende.

y:-100,

cela envoie la légende 100px par occuper cet espace non désiré.

mis à jour votre jsFiddle here

J'espère que ce sera d'une certaine utilité pour vous