使用angular js在highchart指令中获取svg代码

时间:2014-02-07 09:03:27

标签: svg highcharts angularjs-directive

在正常的高图中我得到svg代码,代码如下

var chart = $('#container').highcharts()
svg = chart.getSVG();

那么,如何在角度js中使用此高图指令获取svg代码? 我尝试像普通代码,但我没有得到svg代码。 我将此指令用于我的高图

https://github.com/rootux/angular-highcharts-directive

这是我在controller.js中的代码

$scope.chartLogisticGIGR = {
                options: {
                    tooltip: {
                        shared: true
                    }
                },
                xAxis: { // Primary xAxis
                    categories: $scope.nameMonths,
                    title: {
                        text: 'Month'
                    },
                    labels: {
                        enabled: true
                    },
                    min:0
                },


                yAxis: [{ // Primary yAxis
                    title: {
                        text: 'GI / GR in IDR'
                    },

                    labels: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
                        }
                    }
                }, { // Secondary yAxis
                    title: {
                        text: 'Balance'
                    },

                    labels: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
                        }
                    },
                }],




                series: [{
                            name: 'AGP - Goods Receipt',
                            type: 'column',
                            stacking: 'normal',
                            stack: '1',

                            data: $scope.dataLogisticGIGR_AGP_GR,
                            color: $rootScope.getColor('AGP Ext'),
                            tooltip: {
                                pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
                            }
                        },{
                            name: 'AGP - Goods Issue',
                            type: 'column',
                            stacking: 'normal',
                            stack: '1',
                            data: $scope.dataLogisticGIGR_AGP_GI,
                            color: $rootScope.getColor('AGP Int'),
                            tooltip: {
                                pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
                            }
                        },{
                            name: 'AGP - Balance',
                            type: 'spline',
                            data: $scope.dataLogisticGIGR_AGP_Balance,
                            color: $rootScope.getColor('AI 2'),
                            tooltip: {
                                pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
                            }
                        },{
                            name: 'AI - Goods Receipt',
                            type: 'column',
                            stacking: 'normal',
                            stack: '3',
                            data: $scope.dataLogisticGIGR_AI_GR,
                            color: $rootScope.getColor('AI'),
                            tooltip: {
                                pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
                            }
                        },{
                            name: 'AI - Goods Issue',
                            type: 'column',
                            stacking: 'normal',
                            stack: '3',
                            data: $scope.dataLogisticGIGR_AI_GI,
                            color: $rootScope.getColor('AP 2'),
                            tooltip: {
                                pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
                            }
                        },{
                            name: 'AI - Balance',
                            type: 'spline',
                            data: $scope.dataLogisticGIGR_AI_Balance,
                            color: $rootScope.getColor('AP'),
                            tooltip: {
                                pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
                            }
                        }],
                title: {
                    text: ''
                },
                loading: false
            };

这是我在指令highchart中的代码

'use strict';

angular.module('chartsExample.directives',[])

.directive('chart', function () {
  return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
        chartData: "=value"
    },
    transclude:true,
    replace: true,

    link: function (scope, element, attrs) {
      var chartsDefaults = {
        chart: {
          renderTo: element[0],
          type: attrs.type || null,
          height: attrs.height || null,
          width: attrs.width || null
        }
      };

        //Update when charts data changes
        scope.$watch(function() { return scope.chartData; }, function(value) {
          if(!value) return;
            // We need deep copy in order to NOT override original chart object.
            // This allows us to override chart data member and still the keep
            // our original renderTo will be the same
            var newSettings = {};
            angular.extend(newSettings, chartsDefaults, scope.chartData);
            var chart = new Highcharts.Chart(newSettings);
        });
      }
    };

});

感谢的....

0 个答案:

没有答案