grafico mostra una torta molto piccola

Question

Ho un problema con la torta highcharts, voglio mostrare i miei dati in una torta, ma la torta è molto piccola, si mostra solo come un piccolo punto.

ho cercato la risposta in qualsiasi posto, ma non riesco a trovarlo. Si prega di qualche corpo mi spieghi il motivo è che, ho appena nuova per questo strumenti ...

ho cercato di inviare l'immagine, ma non può ...

di seguito sono il mio codice:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="robots" content="index,archive,follow"> 
<title>CIT Dashboard</title> 
<link rel="stylesheet" media="all" href="css/dashboard.css"/> 
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/highcharts.js"></script> 
<script type="text/javascript">  
    var chart1; 
    var chart2; 
    $(document).ready(function() { 
      chart1 = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'pie1', 
       plotBackgroundColor: '#969696', 
       margin: 0, 
       padding: 0 
      }, 
      legend: { 
       enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %'; 
       } 
      }, 
      plotOptions: { 
       pie: { 
        size:'80%', 
        allowPointSelect: true,     
        plotBorderWidth: 0, 
        plotShadow: false,    
        animation: false, 
        shadow: false, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor:'#000000', 
         distance: -40, 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Transaction by LTS', 
       data: [<%=graph1 %>] 
      }] 
     }); 


     chart2 = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'pie2', 
       plotBackgroundColor: '#969696', 
       margin: 0, 
       padding: 0 
      }, 
      legend: { 
       enabled: false 
      }, 
      title: { 
       text: '', 
       margin: 0 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %'; 
       } 
      }, 
      plotOptions: { 
       pie: { 
        size:'80%', 
        allowPointSelect: true,     
        plotBorderWidth: 0, 
        plotShadow: false,    
        animation: false, 
        shadow: false, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         distance: -40, 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Transaction by LTS', 
       data: [<%=graph2 %>] 
      }] 
     }); 
    }); 

</script> 
</head> 

Grazie

Answer 1

Prova a impostare la larghezza minima e l'altezza del div contenitore in cui si sta generando grafico come questo

<div id="pie1" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

Answer 2

Prima di tutto, definire la larghezza/altezza, in secondo luogo è possibile modificare la dimensione di grafico dal parametro:

http://api.highcharts.com/highcharts#plotOptions.pie.size