Ionic集成HighCharts图表

项目中用得比较多的就是图表，这里介绍一下Ionic集成HighCharts的方法
首先就是需要安装HighCharts图表库，本人比较喜欢把库放在本地，这里我们用bower来安装

bower install highcharts

装完再安装highcharts-ng，这个是highcharts是Angular插件

bower install highcharts-ng

接着就是引用我们下载的highcharts库了，这里在Ionic的index.html里引用

<!-- ionic/angularjs js -->
<script src="lib/highcharts/highcharts.js"></script>
<script src="lib/highcharts-ng/dist/highcharts-ng.min.js"></script>

下面就需要在App.js里写入

angular.module('starter', ['ionic', ...., 'highcharts-ng',....])

ok，引入完成，接下来就是写controller和html了
这里以当前项目为例
在controller里写入

$scope.detailChartConfig = {
                options: {
                    chart: {
                      type: 'bar',
                    }
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: ['合计', '进行中', '问题', '报警', '任务']
                },
                yAxis: {
                    min: 0,
                    tickInterval: 1,
                    title: {
                        text: ''
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: '已完成',
                    colorByPoint: true,
                    colors: ['#66d3f0', '#62debc', '#fecd57', '#f96c51', '#b3df80'],
                    data: [5, 3, 4, 7, 2]
                }]
          };

最后就是在html中引入

<highchart id="chart1" config="detailChartConfig" style="height:300px"></highchart>

接着上一个做完的效果图

屏幕快照 2016-09-30 下午4.35.05.png