angularJs HighChart插件

版权声明：本文可转载 ，但转载必须注明出处并附带本文链接 https://blog.csdn.net/qq_27868533/article/details/81284814

AngularJs调用highChart模块插件

       highchart 插件是一款非常实用而且兼容性强大的数据可视化图标插件，基本常用的图表都有实例，只需要引入模块，然后调整数据结构即可完成此功能。

1、在自己的module中引入 highcharts-ng 模块

angular.module("myApp", ["highcharts-ng"]);

2、controller相关处理

$scope.chart = {
        // 图表配置项
        options: {
            title: {text: ''},
            credits:{enabled: false },// 禁用版权信息
            xAxis: {title: {text: ""}, categories: [], tickInterval: 1},
            yAxis: {title: {text: ''}},
            tooltip: {
                shared: true
            }
        },
        // 数据项
        series: [
           {name: "", data: []}, 
           {name: "", data: []},
        ]
    };

3、在页面调用指令

<highchart id="chart" series="chart.series" titles="" options="chart.options"></highchart>

说明：series="chart.series" 是数据设置，titles="" 图表的名称设置， options="chart.options" 图表的配置项，controller里处理完数据即可完成图表展示。。

highcharts-ng 模块内容

angular.module('highcharts-ng', [])
    .directive('highchart', function () {
        var seriesId = 0;

        //动态生成id
        var ensureIds = function (series) {
            series.forEach(function (s) {
                if (!angular.isDefined(s.id)) {
                    s.id = "series-" + seriesId++;
                }
            });
        };


        var getMergedOptions = function (element, options, series) {
            var defaultOptions = {
                chart: {
                    renderTo: element[0]
                },
                titles: {},
                series: []
            };
            var mergedOptions = {};
            if (options) {
                mergedOptions = $.extend(true, {}, defaultOptions, options);
            } else {
                mergedOptions = defaultOptions;
            }
            if(series) {
                mergedOptions.series = series
            }
            return mergedOptions
        };

        return {
            restrict: 'EC',
            replace: false,
            scope: {
                series: '=',
                options: '=',
                titles: '='
            },
            link: function (scope, element) {

                var mergedOptions = getMergedOptions(element, scope.options, scope.series);

                var chart = new Highcharts.Chart(mergedOptions);

                scope.$watch("series", function (newSeries, oldSeries) {

                    if (newSeries === oldSeries) return;
                    if (newSeries) {
                        ensureIds(newSeries);
                        var ids = [];

                        //Find series to add or update
                        newSeries.forEach(function (s) {
                            ids.push(s.id);
                            var chartSeries = chart.get(s.id);
                            if (chartSeries) {
                                chartSeries.update(angular.copy(s), false);
                            } else {
                                chart.addSeries(angular.copy(s), false)
                            }
                        });
                        //Now remove any missing series
                        chart.series.forEach(function (s) {
                            if (ids.indexOf(s.options.id) < 0) {
                                s.remove(false);
                            }
                        });
                        chart.redraw();
                    }


                }, true);
                scope.$watch("titles", function (newTitle) {
                    chart.setTitle(newTitle, true);
                }, true);
                scope.$watch("options", function (newOptions, oldOptions, scope) {
                    if (newOptions === oldOptions) return;
                    chart.destroy();
                    var mergedOptions = getMergedOptions(element, newOptions);
                    chart = new Highcharts.Chart(mergedOptions);
                    chart.setTitle(scope.titles, true);
                    ensureIds(scope.series);
                    scope.series.forEach(function (s) {
                        chart.addSeries(angular.copy(s), false)
                    });
                    chart.redraw()

                }, true);
            }
        }
    });