[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>

结果：

总结

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