[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代码:

[js插件]学习Highcharts
 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>
[js插件]学习Highcharts

html代码:

1  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

结果:

[js插件]学习Highcharts

总结

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

[js插件]学习Highcharts,布布扣,bubuko.com

[js插件]学习Highcharts

上一篇:mysql 函数的使用 之 group_concat


下一篇:8. 使用Fluentd+MongoDB采集Apache日志