Latest web development tutorials

pie Highcharts 3D

Gambar Highcharts 3D Gambar Highcharts 3D

Contoh berikut menunjukkan grafik pie 3D.

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

konfigurasi

chart.options3d Konfigurasi

Berikut adalah konfigurasi dasar grafik 3D, mengatur grafik dari jenis kue properti, pilihan options3d untuk mengatur efek tiga dimensi. 

var chart = {
   type: 'pie',
   options3d: {
         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true
         alpha: 15,         //图表视图旋转角度
         beta: 15,          //图表视图旋转角度
         depth: 50,         //图表的合计深度，默认为100
         viewDistance: 25   //定义图表的浏览长度
   }
};

contoh

File name: highcharts_3d_pie.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>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {      
      type: 'pie',     
      options3d: {
         enabled: true,
         alpha: 45,
         beta: 0
      }
   };
   var title = {
      text: '2014 年特定网站各浏览器占有率'   
   };   
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };

   var plotOptions = {
      pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
             enabled: true,
             format: '{point.name}'
          }
      }
   };   
   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.plotOptions = plotOptions; 
   json.series = series;   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

Contoh di atas output:

Gambar Highcharts 3D Gambar Highcharts 3D