在一個屏幕上添加多個HighCharts Angularjs

我是HighCharts的新手，我試圖在同一個p上添加兩個Highcharts [正在訪問同一個數據源的年齡，但只是對每個圖形採取某些部分。因此，例如類別將保持不變，但該系列[]將改變在一個屏幕上添加多個HighCharts Angularjs

function get_chart() { 
    var options = { 
     chart: { 
      type: 'column', 
      renderTo:'container' 
     }, 
     title: { 
      text: 'Twitter Data' 
     }, 
     xAxis: { 
      categories: [] 
     }, 

     plotOptions: { 
      series: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       }, point: { 
         events: { 
          click: function() { 
           alert('Category: ' + this.category + ', value: ' + this.y); 
          } 
         } 
        } 
       } 

      }, 

     series: [] 

    }; 
    $.getJSON("data.json", function(json) { 
     options.xAxis.categories = json[0]['data']; 
     options.series[0] = json[1]; 
     options.series[1] = json[2]; 
     chart = new Highcharts.Chart(options); 
    }); 
} 
get_chart(); 

var app = angular.module('charts', []); 

app.directive('highchart', [function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     link: function (scope, element, attrs) { 

      scope.$watch(attrs.chart, function() { 

       if (!attrs.chart) return; 

       var chart = scope.$eval(attrs.chart); 

       angular.element(element).highcharts(chart); 
      }); 

     } 
    } 
}]); 

function Ctrl($scope) { 
    $scope.example_chart = get_chart(); 
}

的Index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>AngularJS + Highcarts </title> 
    </head> 
    <body> 

     <section ng-app='charts'> 
      <div ng-controller="Ctrl"> 
       <highchart chart='example_chart'></highchart> 
      </div> 
     </section> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script type="text/javascript" src="js/highChartStyle.js"></script> 
     <script type="text/javascript" src="js/highChartAngular.js"></script> 
    </body> 
</html>

來源

2015-10-06 user2402107

更新看到這個 woking Plunker

因爲你調用多個高分辨率在同一個div。 Id在html中是唯一的，你不能用相同的id定義兩個div。在類名的函數或調用highcharts

通DIV ID象下面這樣：

get_chart(divParam)

，並在圖表對象

chart: { 
      type: 'column', 
      renderTo:'divParam' 
     }

來源

2015-10-06 15:33:07

可以說，我想重複我將如何實現一個到當前的例子代碼？ – user2402107

如果你想要，因爲它是系列（在兩個地方的意思是同一系列）調用$ .each（「。classNameofDiv），我會添加一個例子的小提琴 –

http://plnkr.co/edit/qzsmLAfKuTPo61pDU2hn?p=preview –

在一個屏幕上添加多個HighCharts Angularjs

回答

相關問題