AngularJS Google Charts - 時間線

使用下面的代碼來生成使用AngularJS iam面對問題的時間線圖表。AngularJS Google Charts - 時間線

基本上iam無法找到導入時間軸包的正確方法。像下面這些進口corechart包導入，如何導入的時間表...

google.load('visualization', '1', {packages: ['corechart']});

我嘗試使用

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>

屁股就沒有工作的工作。

控制器

"use strict"; 

/*We need to manually start angular as we need to 
wait for the google charting libs to be ready*/ 
google.setOnLoadCallback(function() { 
    angular.bootstrap(document.body, ['my-app']); 
}); 
google.load('visualization', '1', {packages: ['corechart']}); 


var myApp = myApp || angular.module("my-app",["google-chart"]); 

myApp.controller("IndexCtrl",function($scope){ 
    $scope.data1 = {}; 
    $scope.data1.dataTable = new google.visualization.DataTable(); 
    $scope.data1.dataTable.addColumn("string","Name") 
    $scope.data1.dataTable.addColumn("number","Qty") 
    $scope.data1.dataTable.addRow(["Test",1]); 
    $scope.data1.dataTable.addRow(["Test2",2]); 
    $scope.data1.dataTable.addRow(["Test3",3]); 
    $scope.data1.title="My Pie" 

    $scope.data2 = {}; 
    $scope.data2.dataTable = new google.visualization.DataTable(); 
    $scope.data2.dataTable.addColumn("string","Name") 
    $scope.data2.dataTable.addColumn("number","Qty") 
    $scope.data2.dataTable.addRow(["Test",1]); 
    $scope.data2.dataTable.addRow(["Test2",2]); 
    $scope.data2.dataTable.addRow(["Test3",3]); 


    $scope.data4 = {}; 
    $scope.data4.dataTable = new google.visualization.DataTable(); 
    $scope.data4.dataTable.addColumn({ type: 'string', id: 'President' }) 
    $scope.data4.dataTable.addColumn({ type: 'date', id: 'Start' }) 
    $scope.data4.dataTable.addColumn({ type: 'date', id: 'End' }) 
    $scope.data4.dataTable.addRows([[ 'Down',  new Date(1797, 2, 3,20.20), new Date(1797, 2, 4,21.20) ], 
      [ 'Jefferson', new Date(1801, 2, 4,20.20), new Date(1801, 2, 4,20.20) ]]); 

    $scope.data3 = {}; 
    $scope.data3.dataTable = new google.visualization.DataTable(); 
    $scope.data3.dataTable.addColumn("string","Name") 
    $scope.data3.dataTable.addColumn("number","Qty") 
    $scope.data3.dataTable.addRow(["Test",1]); 
    $scope.data3.dataTable.addRow(["Test2",2]); 
    $scope.data3.dataTable.addRow(["Test3",3]); 
});

HTML頁面

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" type="text/javascript"></script> 
     <script src="https://www.google.com/jsapi" type="text/javascript"></script> 
     <script src="main.js" type="text/javascript"></script> 
     <script src="ngGoogleCharts.js" type="text/javascript"></script> 
     <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script> 
     <style type="text/css"> 
      .bigGraph {width:500px;height:500px;float:left;} 
      .mediumGraph {width:400px;height:400px;float:left;} 
      .smallGraph {width:200px;height:200px;float:left;} 
     </style> 
    </head> 
    <body ng-controller="IndexCtrl"> 
     <div google-chart="PieChart" ng-model="data1" class="bigGraph"></div> 
     <div google-chart="BarChart" ng-model="data2" class="mediumGraph"></div> 
     <div google-chart="LineChart" ng-model="data3" class="smallGraph"></div> 
     <div google-chart="TimeLine" ng-model="data4" class="smallGraph"></div> 
    </body> 
</html>

ngGoogleCharts.js

"use strict"; 

var googleChart = googleChart || angular.module("google-chart",[]); 

googleChart.directive("googleChart",function(){ 
    return{ 
     restrict : "A", 
     link: function($scope, $elem, $attr){ 
      var dt = $scope[$attr.ngModel].dataTable; 

      var options = {}; 
      if($scope[$attr.ngModel].title) 
       options.title = $scope[$attr.ngModel].title; 
      console.log($scope[$attr.ngModel]+' \t envirName= ', $attr.googleChart+' Ele \t '+$elem[0]); 
      var googleChart = new google.visualization[$attr.googleChart]($elem[0]); 
      googleChart.draw(dt,options) 
     } 
    } 
});

來源

2016-02-05 Nayeem

什麼是錯誤？如果您單獨加載谷歌圖表，您是否面臨競爭狀況問題？如果是的話，你考慮過文件準備好了嗎？ –

最有可能你AR Ë收到錯誤，因爲對於google-chart配置參數的值設置爲TimeLine與這樣的鍵對象無法找到：

var googleChart = new google.visualization[$attr.googleChart]($elem[0]);

時間軸谷歌圖的類名是google.visualization.Timeline

因此，該解決方案是將值替換從TimeLine到Timeline：

<div google-chart="Timeline" ng-model="data4" class="smallGraph"></div>

Plunker

來源

2016-02-07 10:02:43

不需要包含'jsapi'兩次 - > [Plunker]（https://plnkr.co/edit/OFg5ngcMw0mu3IuEdrR7?p=preview） – WhiteHat

AngularJS Google Charts - 時間線

回答

相關問題