Latest web development tutorials

Highcharts setengah lingkaran Doughnut

Highcharts Pie Highcharts Pie

Contoh berikut menggambarkan donat setengah lingkaran.

Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi dasar Highcharts. Mari kita lihat konfigurasi lainnya.

konfigurasi

konfigurasi seri

Mengatur serangkaian jenis atribut pie series.type menjelaskan jenis data kolom. Nilai default adalah "line". Konfigurasi ukuran pie menggunakan properti innerSize dan mengatur innerSize: '50% '. 

var series = {
   type: 'pie',
   innerSize: '50%'
};

contoh

File name: highcharts_pie_semicircle_donut.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: 0,
       plotShadow: false
   };
   var title = {
      text: 'Browser<br>shares',
      align: 'center',
      verticalAlign: 'middle',
      y: 50	  
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         dataLabels: {
            enabled: true,
            distance: -50,
            style: {
               fontWeight: 'bold',
               color: 'white',
               textShadow: '0px 1px 2px black'
            }
         },
         startAngle: -90,
         endAngle: 90,
         center: ['50%', '75%']
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      innerSize: '50%',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         ['Chrome', 12.8],
         ['Safari',    8.5],
         ['Opera',     6.2],
         {
            name: 'Others',
            y: 0.7,
            dataLabels: {
               enabled: false
            }
         }
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

Contoh di atas output:

Highcharts Pie Highcharts Pie