Highcharts 中基本饼图的简单介绍----JavaScript互动图表框架

今天工作不是很忙，向大家推荐一个javascript的图表框架（HighCharts），该框架的兼容性做的很好，目前主流浏览器均兼容（IE6-9，chrome，firefox，opera等）

该框架是利用纯javascript创建Svg元素进行画出相关的一系列图表，支持线性， 区域，柱状，饼状，散点图等类型。

先介绍一个基本的饼图吧

1.下载JS框架：http://www.highcharts.com （版本2.1.6）

2.引用的相关代码：

容器：

<script type="text/javascript" src="highcharts.js"></script>

<div id="container"></div>

JavaScript：

<script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', //指向容器 plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' //标题 }, tooltip: { //提示框 formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } }, plotOptions: { pie: { //饼图 allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, //false 不显示指示线 color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: [ //数据为数组也行，对象也行 ['Firefox', 45.0], //这里不用写%，45.0==45% number ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, //分离 selected: true //选中为真 }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); });

这样就ok~\(≧▽≦)/~啦啦啦，我这是copy官方网站的例子，加了点解释！自己可以到官方网站查看相关文档！

截图：