[js插件]学习Highcharts

放了三天假，在家闲着没事，做了一个个人记账的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} %

26 },

27 series: [{

28 type: pie,

29 name: 衣食住行,

30 data: [

31 [住, 45.0],

32 [食, 26.8],

34 name: 衣,

35 y: 12.8,

36 sliced: true,

37 selected: true

38 },

39 [行, 8.5],

41 [其他, 0.7]

43 }]

44 });

45 });

46 /script 

html代码：

1 div id="container" /div 

结果：

这里只是简单的学习一下，具体应用还是等记账项目做出来之后再做详细总结吧。

博客版权： 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！
再次感谢您耐心的读完本篇文章。

转载：http://www.cnblogs.com/wolf-sun/p/3650372.html