在一个屏幕上添加多个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

回答

相关问题