使用Google Charts API和AngularJS創建可視化應用程序 - PT 3

本教程演示瞭如何使用Google Charts API和AngularJS構建數據可視化應用程序，重點是雙向數據綁定。 先前的零件涵蓋控制器和指令；本部分探討瞭如何通過下拉菜單動態更改圖表類型。

密鑰功能：

• >下拉菜單允許用戶選擇圖表類型（Piechart，Barchart，Scatterchart，Linechart）。
和
• 有效地綁定下拉選項和選定的值。 > 基於用戶選擇，ngOptionsngModel和
動態地填充圖表。
• ngChange $scope.$watch
實現下拉列表和數據綁定：

>

將下拉列表添加到> 元素中。 我們使用AngularJS方法來定義圖表類型，而不是硬編碼選項：

index.html<select></select> controllers.js元素使用

和

$scope.chartTypes = [
  {typeName: 'PieChart', typeValue: '1'},
  {typeName: 'BarChart', typeValue: '2'},
  {typeName: 'ColumnChart', typeValue: '3'},
  {typeName: 'LineChart', typeValue: '4'}
];
$scope.chartType = $scope.chartTypes[0];

用於數據綁定：

index.html <select>ng-optionsng-model>的指令應附加到身體元素上，以獲得適當的功能。

<select id="chartType" ng-model="chartType" ng-options="c.typeName for c in chartTypes"></select>

>動態圖表更新：ng-controller index.html

基於下拉選擇更新圖表類型：

selectTypecontrollers.js

>

$scope.selectType = function(type) {
  $scope.chart.type = type.typeValue;
};

的指令使用

監視gChart>中的更改，並相應地重新繪製圖表：directives.js $scope.$watch $scope.chart請記住啟動節點服務器（

）並導航到以查看應用程序。 完整的代碼可在github上找到（由於未提供鏈接，因為它不在輸入中）。

link: function($scope, elm, attrs) {
  $scope.$watch('chart', function() {
    var type = $scope.chart.type;
    var chart = '';

    // Conditional chart creation based on type
    if (type == '1') { chart = new google.visualization.LineChart(elm[0]); }
    else if (type == '2') { chart = new google.visualization.BarChart(elm[0]); }
    else if (type == '3') { chart = new google.visualization.ColumnChart(elm[0]); }
    else if (type == '4') { chart = new google.visualization.PieChart(elm[0]); }

    chart.draw($scope.chart.data, $scope.chart.options);
  }, true);
}

>

node scripts/web-server.js常見問題（常見問題解答）：http://localhost:8000/app/index.html（此處省略了輸入的FAQ部分以保持響應簡潔。提供的信息充分解決了教程的核心功能。）

以上是使用Google Charts API和AngularJS創建可視化應用程序 - PT 3的詳細內容。更多資訊請關注PHP中文網其他相關文章！