Angular 封装highcharts图表

highcharts-ng 的git地址：https://github.com/pablojim/highcharts-ng

我这里使用的npm：

npm install highcharts-ng

HTML代码片段：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <highchart config="chartConfig"></highchart>
    </div>
</div>

引入相应的js文件：

<script src="js/jquery.js"></script>
<script src="js/angular.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-ng.js"></script>

编写js代码：

  var myapp = angular.module('myApp', ["highcharts-ng"]);

myapp.controller('MyCtrl',['$scope',function($scope) {
        $scope.chartConfig = {


            'options': {
                'chart': {
                    'type': 'column',//柱状图
                    zoomType: 'none',
                    plotShadow: true,
                    plotBorderWidth: 1
                },
                'lang': {
                    printChart:"打印图表",
                    downloadJPEG: "下载JPEG 图片" ,
                    downloadPDF: "下载PDF文档"  ,
                    downloadPNG: "下载PNG 图片"  ,
                    downloadSVG: "下载SVG 矢量图" ,
                    exportButtonTitle: "导出图片"
                },
                legend: {enabled: true},
                xAxis: {
                    gridLineWidth: 1,
                    labels: {
                        style: {
                            fontSize: '12px'
                        }
                    }
                },
                yAxis: {
                    min: 0, title: {text: false}
                },
                tooltip: {
                    //useHTML: true
                },
                plotOptions: {
                },
                'noData': '暂无数据'
            },
            xAxis: {},


            yAxis: {
                min: 0,
                title: {
                    text: false
                },
                allowDecimals:false
            },
            legend: {enabled: true},
            'series': [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }],
            'title': {
                'text': ''
            },


            'credits': {
                'enabled': false
            },
            'loading': false,
            'size': {
                'height': '500'
            },
            func: function (chart) {
                //    console.log('图表创建成功或数据变化：', chart);
            }






        }
    }]);

说明：主要是要熟悉highcharts的API。这样就能事半功倍的开发出炫丽的图表。