Chart 跟 ionic中ion-slide-box结合使用

最近在ng1项目中有图表统计查询功能的需求，而且是在移动端使用。
所以要考虑到排版问题。如果多张统计图表能够滑动来显示不就更省占位，而且也更舒服，比如查询某部门下有两个子部门，那就有两张图表了。
我们需要先引入Chart相关的js文件，这个根据自己项目框架来。
首先我们要先要了解Chart的数据格式跟属性使用。

$scope.series = ['总天数','人均天数'];

hrSvc.vacation.statsAllCountPic(params,function (data,successful) {
                if (successful) {
                    $scope.vacationStatsAll = data;
                    $scope.sliderList = [];
                    angular.forEach(data,function (item,idx) {
                        $scope.labels = [];
                        $scope.chartData = [];
                        //统计数据各子数组，单独的数组，chart格式需要
                        $scope.allCountsArr = [];
                        $scope.perCountsArr = [];
                        $scope.labels.push(item.orgName);
                        $scope.allCountsArr.push(item.allCounts % 8 == 0 ? item.allCounts / 8 : (item.allCounts / 8).toFixed(1));
                        $scope.perCountsArr.push(item.perCounts % 8 == 0 ? item.perCounts / 8 : (item.perCounts / 8).toFixed(1));
                        $scope.chartData.push($scope.allCountsArr,$scope.perCountsArr);
                        var sliderData = {};
                        sliderData.chartDataAll = $scope.chartData;
                        sliderData.labelsAll = $scope.labels;
                        $scope.sliderList.push(sliderData);
                    });
                }
            });

上面的代码作用是通过接口获取数据，然后根据chart格式的需要进行整理：sliderList:[[chartDataAll:[[x1],[x2]...],labelsAll:[c1]],[chartDataAll:[[x1],labelsAll:[c1]]]

第二了解Chart的几个重要属性

<canvas id="bar" class="chart-bar"
                    chart-data="item.chartDataAll" chart-labels="item.labelsAll" chart-series="series"></canvas>

根据class来显示不同样式的统计图表，这些属性可以在chart文档或者官网找到。

第三，把上面代码放到ion-slide-box中使用，

<!-- chart 统计图表 -->
<div ng-if="vacationStatsAll.length>0">
    <p class="assertive padding">如有多个部门可左右滑动查看</p>
    <ion-slide-box show-pager="false">
        <ion-slide ng-repeat="item in sliderList">
            <canvas id="bar" class="chart-bar" chart-data="item.chartDataAll" chart-labels="item.labelsAll" chart-series="series"></canvas>
        </ion-slide>
    </ion-slide-box>
    <br>
</div>

这里有个坑要注意，在数据接口获取中第一步要先把获取到的数据绑定到对象上再进行遍历，然后在页面上要用ng-if来判断不能用ng-show不然会没图表显示。
show-pager=”false”是ion-slide-box的属性，用来指定是否显示底部加页面点点。

上面两行是table对应的数据，不是本章重点，chart左边的Y轴数据貌似改不了，会自动根据自己获取的数据的最大值来同等大小。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!