GoogleチャートAPIとAngularJSを使用して視覚化アプリを作成する-PT 3

このチュートリアルでは、双方向のデータバインディングに焦点を当てたGoogle Charts APIとAngularJSを使用してデータ視覚化アプリケーションを構築する方法を示しています。 以前の部品では、コントローラーと指令をカバーしました。このパートでは、ドロップダウンメニューを介してチャートタイプを動的に変更する方法について説明します。

主要な機能：

ドロップダウンメニューにより、ユーザーはチャートタイプを選択できます（PieChart、Barchart、SpatterChart、LineChart）。

Angularjsの双方向データバインディングは、モデル（選択したチャートタイプ）が変更されたときにチャートのビューを自動的に更新します。
• および
• ドロップダウンオプションと選択された値を効率的にバインドします。
• およびngOptionsユーザーの選択に基づいてチャートを動的に解決します。 ngModel
• ドロップダウンとデータバインディングの実装：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></select>ng-optionsダイナミックチャートの更新：ng-model

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

関数ng-controllerドロップダウンの選択に基づいてチャートタイプを更新します：index.html

の指令はを使用して、

の変更を監視し、それに応じてチャートを再描画します。

selectTypeノードサーバー（controllers.js）を起動し、アプリケーションを確認するために

に移動することを忘れないでください。 完全なコードはGitHubで利用できます（入力に含まれていなかったため、リンクは提供されていません）。

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

よくある質問（FAQS）：gChart（ここでは、応答を簡潔に保つために入力から省略されています。提供された情報は、チュートリアルのコア機能に十分に対応しています。

以上がGoogleチャートAPIとAngularJSを使用して視覚化アプリを作成する-PT 3の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。