{{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)該會(huì)顯示名稱。<\/p>\n

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

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

{{name}}<\/div><\/pre>\n
接下來(lái)，修改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是一個(gè)全局API，用于手動(dòng)啟動(dòng)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
重新啟動(dòng)Node服務(wù)器并訪問(wèn)http:\/\/localhost:8000\/app\/index.html。您應(yīng)該會(huì)看到基于我們的虛擬數(shù)據(jù)的折線圖。<\/p>\n
結(jié)論<\/strong><\/p>
在本教程的這一部分中，我們重點(diǎn)介紹了Angular控制器。在下一篇文章中，我們將重點(diǎn)介紹指令和$scope的使用。同時(shí)，本文的所有代碼都可以在GitHub上找到。<\/p>\n
使用Google Charts API和AngularJS創(chuàng)建可視化應(yīng)用程序的常見(jiàn)問(wèn)題解答(FAQ)<\/strong><\/p>\n
如何自定義Google Charts的外觀？<\/h3>\n
Google Charts API提供了廣泛的自定義選項(xiàng)，允許您修改圖表的外觀。您可以更改顏色、字體、網(wǎng)格線等等。要自定義圖表，您需要修改圖表draw()方法中的options對(duì)象。例如，要更改圖表的標(biāo)題，您可以使用以下代碼：<\/p>\n
\n\n
<\/div><\/pre>\n
請(qǐng)記住，options對(duì)象可以包含許多屬性，允許您廣泛地自定義圖表。<\/p>\n
如何向Google Charts添加交互性？<\/h3>\n
Google Charts API提供了多種向圖表添加交互性的方法。最常見(jiàn)的方法之一是使用“select”事件，該事件在用戶選擇圖表上的項(xiàng)目時(shí)觸發(fā)。您可以向圖表添加一個(gè)事件偵聽(tīng)器，該偵聽(tīng)器偵聽(tīng)“select”事件，并在觸發(fā)時(shí)執(zhí)行操作。這是一個(gè)示例：<\/p>\n
cd angular-seed\nnode scripts\/web-server.js<\/pre>\n
在此示例中，當(dāng)用戶選擇圖表上的項(xiàng)目時(shí)，將出現(xiàn)一個(gè)警報(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
安裝該包后，您可以使用該包提供的指令來(lái)創(chuàng)建和自定義圖表。<\/p>\n
如何在Google Charts中連接多個(gè)DataTable？<\/h3>\n
可以使用google.visualization.data.join()方法在Google Charts中連接多個(gè)DataTable。此方法將三個(gè)DataTable作為參數(shù)：第一個(gè)DataTable、第二個(gè)DataTable以及每個(gè)DataTable的鍵列。該方法返回一個(gè)新的DataTable，其中包含兩個(gè)DataTable中鍵列值匹配的行。這是一個(gè)示例：<\/p>\n
\n\n\n  \n