Highcharts 3D 饼图 - 学习 Hightcharts - 简单教程，简单编程

下图是一个 Highcharts 3D 饼图

配置

1. chart.options3d 配置

设置属性 chart.type 为 'pie' 即可显示饼图

属性 chart.options3d 选项可设置三维效果

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

范例

下面的代码列出了 Highcharts 3D 饼图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>
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 options = {};

options.chart = chart;
options.title = title;
options.tooltip = tooltip;
options.plotOptions = plotOptions;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下