Angularjs中添加HighCharts

一. 添加基本配置

　　1. 添加指令

angular.module('newApp')
  .directive('dpHighchart', ['$rootScope', function($rootScope){
    return {
      restrict: 'E',
      scope: {
        chartConfig: "="
      },
      link: function ($scope, element, $attr) {
        $scope.$watch('chartConfig', function (newValue, oldValue) {
          if (newValue) {
            $(element).highcharts($scope.chartConfig);
          }
        });
      }
    }
  }])

　　2. 添加CSS样式

dp-highchart {
  display: block;
}

 

二. 使用方法

　　1. html中添加一行。

<dp-highchart chart-config="chartConfig1"></dp-highchart>

　　2. JS中添加一句。

　　$scope.chartConfig1 = object(chart配置对象);