引言
放了三天假，在家闲着没事，做了一个个人记账的web应用程序，其中一块就是数据统计的功能，也就学习了一下Highcharts。
Highcharts
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
首先引入js文件：
1 <script type="text/javascript" src="Scripts/jquery-1.11.0.js"></script> 2 <script type="text/javascript" src="Highcharts/highcharts.js"></script> 3 <script type="text/javascript" src="Highcharts/exporting.js"></script>
js代码:
1 <script type="text/javascript"> 2 $(function () { 3 $('#container').highcharts({ 4 chart: { 5 plotBackgroundColor: null, 6 plotBorderWidth: null, 7 plotShadow: false 8 }, 9 title: { 10 text: '个人衣食住行' 11 }, 12 tooltip: { 13 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 14 }, 15 plotOptions: { 16 pie: { 17 allowPointSelect: true, 18 cursor: 'pointer', 19 dataLabels: { 20 enabled: true, 21 color: '#000000', 22 connectorColor: '#000000', 23 format: '<b>{point.name}</b>: {point.percentage:.1f} %' 24 } 25 } 26 }, 27 series: [{ 28 type: 'pie', 29 name: '衣食住行', 30 data: [ 31 ['住', 45.0], 32 ['食', 26.8], 33 { 34 name: '衣', 35 y: 12.8, 36 sliced: true, 37 selected: true 38 }, 39 ['行', 8.5], 40 41 ['其他', 0.7] 42 ] 43 }] 44 }); 45 }); 46 </script>
html代码：
1 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
结果：
总结
这里只是简单的学习一下，具体应用还是等记账项目做出来之后再做详细总结吧。
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 转载：http://www.cnblogs.com/wolf-sun/p/3650372.html |