highcharts.js 简单使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了highcharts.js 简单使用相关的知识，希望对你有一定的参考价值。
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>
以上是关于highcharts.js 简单使用的主要内容，如果未能解决你的问题，请参考以下文章