Latest web development tutorials

Highcharts pie base

Highcharts Pie Highcharts Pie

L'exemple suivant illustre le graphique de base de tarte.

Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations.

configuration

configuration en série

L'attribut type est défini série pie, colonne series.type décrit le type de données. La valeur par défaut est "en ligne". 

var series = {
   type: 'pie'
};

Exemples

Nom du fichier: highcharts_pie_basic.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: '2014 年各浏览器市场占有比例'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
         },
         ['Safari',    8.5],
         ['Opera',     6.2],
         ['Others',   0.7]
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

L'exemple ci-dessus sortie est:

Highcharts Pie Highcharts Pie