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

現(xiàn)在，將瀏覽器URL指向http:\/\/localhost:8000\/app\/index.html，應(yīng)該會顯示名稱。<\/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應(yīng)用程序。<\/p>\n
<\/pre>\n
angular.bootstrap是一個全局API，用于手動啟動Angular應(yīng)用程序。只需將Google Chart創(chuàng)建代碼復(fù)制并粘貼到控制器函數(shù)中，這就是我們的最終結(jié)果：<\/p>\n
<\/div><\/pre>\n
在運(yùn)行代碼之前，編輯index.html并從html標(biāo)簽中刪除ng-app=\"myApp\"。ng-app使用應(yīng)用程序引導(dǎo)元素。但是，由于我們已經(jīng)在控制器代碼中執(zhí)行此操作（使用以下代碼行），因此我們可以將其從HTML中刪除。<\/p>\n
google.load('visualization', '1', {packages:['corechart']});<\/pre>\n
重新啟動Node服務(wù)器并訪問http:\/\/localhost:8000\/app\/index.html。您應(yīng)該會看到基于我們的虛擬數(shù)據(jù)的折線圖。<\/p>\n
結(jié)論<\/strong><\/p>
在本教程的這一部分中，我們重點(diǎn)介紹了Angular控制器。在下一篇文章中，我們將重點(diǎn)介紹指令和$scope的使用。同時，本文的所有代碼都可以在GitHub上找到。<\/p>\n
使用Google Charts API和AngularJS創(chuàng)建可視化應(yīng)用程序的常見問題解答(FAQ)<\/strong><\/p>\n
如何自定義Google Charts的外觀？<\/h3>\n
Google Charts API提供了廣泛的自定義選項(xiàng)，允許您修改圖表的外觀。您可以更改顏色、字體、網(wǎng)格線等等。要自定義圖表，您需要修改圖表draw()方法中的options對象。例如，要更改圖表的標(biāo)題，您可以使用以下代碼：<\/p>\n
\n\n
<\/div><\/pre>\n
請記住，options對象可以包含許多屬性，允許您廣泛地自定義圖表。<\/p>\n
如何向Google Charts添加交互性？<\/h3>\n
Google Charts API提供了多種向圖表添加交互性的方法。最常見的方法之一是使用“select”事件，該事件在用戶選擇圖表上的項(xiàng)目時觸發(fā)。您可以向圖表添加一個事件偵聽器，該偵聽器偵聽“select”事件，并在觸發(fā)時執(zhí)行操作。這是一個示例：<\/p>\n
cd angular-seed\nnode scripts\/web-server.js<\/pre>\n
在此示例中，當(dāng)用戶選擇圖表上的項(xiàng)目時，將出現(xiàn)一個警報(bào)框，顯示所選項(xiàng)目的value。<\/p>\n
如何將Google Charts與AngularJS一起使用？<\/h3>\n
要將Google Charts與AngularJS一起使用，您可以使用angular-google-charts包。此包提供了一組AngularJS指令，使您可以輕松地將Google Charts集成到您的AngularJS應(yīng)用程序中。要安裝該包，您可以使用以下命令：<\/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