标签：
highcharts.js ,可以在网页中绘制表的 js 类库。相对于其他 使用 canvas，highcharts.js 使用 svg绘制图表在兼容性上更有优势。
highcharts.js 还提供了图表下载功能。
highcharts.js 的 api文档很完善(中文), 怎么使用不加赘述。
绘制饼状图（来源于官方实例，增加了一行去右下角水印的配置）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>htghcharts饼状图</title> 7 <script type="text/javascript" src="jQuery.min.js"></script> 8 </head> 9 10 <body> 11 <script type="text/javascript"> 12 $(document).ready(function() { 13 $(‘#container‘).highcharts({ 14 chart: { 15 plotBackgroundColor: null, 16 plotBorderWidth: null, 17 plotShadow: false, 18 type: ‘pie‘ 19 }, 20 title: { 21 text: ‘浏览器品牌使用百分比‘ 22 }, 23 tooltip: { 24 pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘ 25 }, 26 plotOptions: { 27 pie: { 28 allowPointSelect: true, 29 cursor: ‘pointer‘, 30 dataLabels: { 31 enabled: false 32 }, 33 showInLegend: true 34 } 35 }, 36 credits: { 37 enabled: false /*配置不输出右下角水印*/ 38 }, 39 series: [{ 40 name: ‘品牌‘, 41 colorByPoint: true, 42 data: [{ 43 name: ‘IE‘, 44 y: 56.33 45 }, { 46 name: ‘Chrome‘, 47 y: 24.03, 48 sliced: true, 49 selected: true 50 }, { 51 name: ‘Firefox‘, 52 y: 10.38 53 }, { 54 name: ‘Safari‘, 55 y: 4.77 56 }, { 57 name: ‘Opera‘, 58 y: 0.91 59 }, { 60 name: ‘Proprietary or Undetectable‘, 61 y: 0.2 62 }] 63 }] 64 }); 65 }); 66 </script> 67 <script src="highcharts.js"></script> 68 <!--提供下载服务，官方后端服务，可以配置到自己的服务器--> 69 <script src="exporting.js"></script> 70 <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 71 </body> 72 73 </html>
标签：
原文地址：http://www.cnblogs.com/ChuangZhang/p/5325637.html
