HighCharts之2D饼图


1、 HighCharts之2D饼图源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D饼图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
$('#pieChart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
          },
title: {
text: '2013年收入'
          },
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                  }
              }
          },
series: [{
type: 'pie',
name: '月收入占比',
data: [
                  ['一月', 8956],
                  ['二月', 5612],
                  ['三月', 4515],
                  ['四月', 9565],
                  ['五月', 2356],
                  ['六月', 4512],
                  ['七月', 5623],
                  ['八月', 1245],
                  ['九月', 4578],
                  ['十月', 8754],
                  ['十一月',6231],
                  ['十二月',5124]
              ]
          }]
      });
  });
</script>
</head>
<body>
<div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>


2、运行结果

HighCharts之2D饼图_2d