{{name}}<\/div>\n \n \n \n \n \n \n \n<\/body>\n<\/html><\/pre>\n

現(xiàn)在，將瀏覽器URL指向http:\/\/localhost:8000\/app\/index.html，應該會顯示名稱。 <\/p>\n

創(chuàng)建圖表<\/strong><\/p>\n

現(xiàn)在，讓我們繪製一些圖表。首先，在index.html中包含Ajax API。 <\/p>\n

{{name}}<\/div><\/pre>\n
接下來，修改index.html中的div，如下所示。 <\/p>\n
'use strict';\n\n\/* Controllers *\/\n\nangular.module('myApp.controllers', []).\n  controller('MyCtrl1', ['$scope',\n    function($scope) {\n      $scope.name = 'Jay';\n    }\n  ])\n  .controller('MyCtrl2', [\n    function() {\n\n    }\n  ]);<\/pre>\n
在controllers.js中加載Visualization API和linechart包。 <\/p>\n
node scripts\/web-server.js<\/pre>\n
加載包後，我們需要初始化我們的Angular應用程序。 <\/p>\n
<\/pre>\n
angular.bootstrap是一個全局API，用於手動啟動Angular應用程序。只需將Google Chart創(chuàng)建代碼複製並粘貼到控制器函數(shù)中，這就是我們的最終結(jié)果：<\/p>\n
<\/div><\/pre>\n
在運行代碼之前，編輯index.html並從html標籤中刪除ng-app=\"myApp\"。 ng-app使用應用程序引導元素。但是，由於我們已經(jīng)在控制器代碼中執(zhí)行此操作（使用以下代碼行），因此我們可以將其從HTML中刪除。 <\/p>\n
google.load('visualization', '1', {packages:['corechart']});<\/pre>\n
重新啟動Node服務(wù)器並訪問http:\/\/localhost:8000\/app\/index.html。您應該會看到基於我們的虛擬數(shù)據(jù)的折線圖。 <\/p>\n
結(jié)論<\/strong><\/p>
在本教程的這一部分中，我們重點介紹了Angular控制器。在下一篇文章中，我們將重點介紹指令和$scope的使用。同時，本文的所有代碼都可以在GitHub上找到。 <\/p>\n
使用Google Charts API和AngularJS創(chuàng)建可視化應用程序的常見問題解答(FAQ)<\/strong><\/p>\n
如何自定義Google Charts的外觀？ <\/h3>\n
Google Charts API提供了廣泛的自定義選項，允許您修改圖表的外觀。您可以更改顏色、字體、網(wǎng)格線等等。要自定義圖表，您需要修改圖表draw()方法中的options對象。例如，要更改圖表的標題，您可以使用以下代碼：<\/p>\n
\n\n
<\/div><\/pre>\n
請記住，options對象可以包含許多屬性，允許您廣泛地自定義圖表。 <\/p>\n
如何向Google Charts添加交互性？ <\/h3>\n
Google Charts API提供了多種向圖表添加交互性的方法。最常見的方法之一是使用“select”事件，該事件在用戶選擇圖表上的項目時觸發(fā)。您可以向圖表添加一個事件偵聽器，該偵聽器偵聽“select”事件，並在觸發(fā)時執(zhí)行操作。這是一個示例：<\/p>\n
cd angular-seed\nnode scripts\/web-server.js<\/pre>\n
在此示例中，當用戶選擇圖表上的項目時，將出現(xiàn)一個警報框，顯示所選項目的value。 <\/p>\n
如何將Google Charts與AngularJS一起使用？ <\/h3>\n
要將Google Charts與AngularJS一起使用，您可以使用angular-google-charts包。此包提供了一組AngularJS指令，使您可以輕鬆地將Google Charts集成到您的AngularJS應用程序中。要安裝該包，您可以使用以下命令：<\/p>\n
HTTP Server running at http:\/\/localhost:8000\/<\/code><\/pre>\n
安裝該包後，您可以使用該包提供的指令來創(chuàng)建和自定義圖表。 <\/p>\n
如何在Google Charts中連接多個DataTable？ <\/h3>\n
可以使用google.visualization.data.join()方法在Google Charts中連接多個DataTable。此方法將三個DataTable作為參數(shù)：第一個DataTable、第二個DataTable以及每個DataTable的鍵列。該方法返回一個新的DataTable，其中包含兩個DataTable中鍵列值匹配的行。這是一個示例：<\/p>\n
\n\n\n  \n