首页 | 简单教程,简单编程

代码编辑器：

<!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>

代码编辑器：

运行结果：