项目中用得比较多的就是图表，这里介绍一下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
