[js插件]学习Highcharts

引言

放了三天假，在家闲着没事，做了一个个人记账的web应用程序，其中一块就是数据统计的功能，也就学习了一下Highcharts。

Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

首先引入js文件：

  <script type="text/javascript" src="Scripts/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="Highcharts/highcharts.js"></script>
  <script type="text/javascript" src="Highcharts/exporting.js"></script>

js代码:

   <script type="text/javascript">
         $(function () {
             $('#container').highcharts({
                 chart: {
                     plotBackgroundColor: null,
                     plotBorderWidth: null,
                     plotShadow: false
                 },
                 title: {
                     text: '个人衣食住行'
                 },
                 tooltip: {
                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                 },
                 plotOptions: {
                     pie: {
                         allowPointSelect: true,
                         cursor: 'pointer',
                         dataLabels: {
                             enabled: true,
                             color: '#000000',
                             connectorColor: '#000000',
                             format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                         }
                     }
                 },
                 series: [{
                     type: 'pie',
                     name: '衣食住行',
                     data: [
                         ['住', 45.0],
                         ['食', 26.8],
                         {
                             name: '衣',
                             y: 12.8,
                             sliced: true,
                             selected: true
                         },
                         ['行', 8.5],                         ['其他', 0.7]
                     ]
                 }]
             });
         });
     </script>

html代码：

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

结果：

总结

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