Angular.js+GoogleChartToolsでグラフ描画2(円グラフ)


[Angular.js+GoogleChartToolsでグラフ描画1(円グラフ)](http://qiita.com/koshihikari/items/ce1ddda3c2f07eb078ed)で描画したグラフのカスタマイズについて説明します。


##typeとdata
GoogleChartToolsでグラフを描画するには最低でもtypeとdataを指定しないといけません。
今回は円グラフを描画したので下記のようになりました。

```app/scripts/controllers/main.js
chart.type = "PieChart"; // 円グラフを描画
chart.data = [ // 円グラフに表示するデータを指定
	['title', 'val'],
	['パターンA', 55],
	['パターンB', 45]
];
```

typeには'PieChart'以外にも'ColumnChart'や'LineChart'等も指定できます。
詳しくは[Google Charts — Google Developers](https://google-developers.appspot.com/chart/)を参照してください。


##円グラフのoptions
optionsを指定することで円グラフをカスタマイズすることが出来ます。

```app/scripts/controllers/main.js
'use strict';

angular.module('chartApp')
  .controller('MainCtrl', function ($scope) {
    $scope.testchart = createChart();
	function createChart() {
		var chart = {};
		chart.type = "PieChart";
		chart.data = [
			['title', 'val'],
			['パターンA', 55],
			['パターンB', 45],
			['パターンC', 30],
			['パターンD', 20]
		];
		chart.options = {
			title: '円グラフタイトル',
			is3D: true,
			titleTextStyle: {color:'#000', bold:true, fontSize:20},
			legend: {position:'labeled',textStyle:{fontSize:10,bold:true}}
		}
		return chart;
	}
  });
```
![screenshot-by-nimbus (1).png](https://qiita-image-store.s3.amazonaws.com/0/34439/5d885e8d-37df-457a-9331-03047751d06f.png "screenshot-by-nimbus (1).png")


円グラフのoptionsに指定できる値には下記のようなものが有ります。

| プロパティ | 型 | 説明 |
|:-----------|:------------|:------------|:------------|
| backgroundColor | string or object| グラフの背景色を指定します。 |
| backgroundColor.fill | string | グラフの背景色を指定します。 |
| backgroundColor.stroke | string | グラフ描画領域の枠線の色を指定します。 |
| backgroundColor.strokeWidth | number | グラフ描画領域の枠線の太さを指定します。 |
| chartArea | object| グラフの位置/大きさを指定します。 |
| chartArea.backgroundColor | string or object| グラフの背景色を指定するようですが、backgroundColorとの違いが分からないので使っていません。 |
| chartArea.left | number or string | グラフの描画領域左端からのX座標を指定します。 |
| chartArea.top | number or string | グラフの描画領域上端からのY座標を指定します。 |
| chartArea.width | number or string | グラフの幅を指定します。 |
| chartArea.height | number or string | グラフの高さを指定します。 |
| colors | array | グラフの色を配列で指定します。 |
| enableInteractivity | boolean | trueを指定すると、グラフにrollover/選択した際にツールチップが表示されます。　※ツールチップの表示のイベントは'tooltip.trigger'で指定します。 |
| fontSize | number | グラフ中に表示されるテキストのフォントサイズを指定します。 |
| fontName | string | グラフ中に表示されるテキストのフォント名を指定します。 |
| forceIFrame | boolean | trueの場合、iFrameにグラフを描画します。 |
| height | number | グラフの高さを指定します。 |
| is3D | boolean | trueで三次元円グラフ、falseで二次元円グラフが表示されます。 |
| legend | object | 凡例の表示の仕方を指定します。 |
| legend.alignment | string | 凡例の並びを指定します。 |
| legend.position | string | 凡例の表示位置を指定します。 |
| legend.maxLines | number | 凡例の最大行数を指定します。※legend.positionが'top'の場合のみ機能します。 |
| legend.textStyle | object | 凡例のテキストスタイルを指定します。 |
| pieHole | number | 0より大きく1未満の値を指定すると、ドーナツグラフを表示します。※is3Dがfalseの場合のみ機能します。 |
| pieSliceBorderColor | string | スライスの境界線の色を指定します。※is3Dがfalseの場合のみ機能します。 |
| pieSliceText | string | スライス上に表示する内容を指定します。　有効な値は'percent'(スライスのサイズの割合), 'value'(スライスの値), 'label'(スライスの名前), 'none'(なし) |
| pieSliceTextStyle | object | スライスのテキストスタイルを指定します。 |
| pieStartAngle | number | グラフの表示角を指定します。 || pieResidueSliceColor | string | まとめたスライスの色を指定します。 |
| pieResidueSliceLabel | string | まとめたスライスのラベルを指定します。 |
| reverseCategories | boolean | trueの場合、反時計回りにスライスを描画します。 |
| slices | array | 各スライスのフォーマットを指定します。　指定できるのは'color'(スライスの色), 'offset'(中心点からの距離0〜1), 'textStyle'(テキストスタイル) |
| sliceVisibilityThreshold | number | スライスを個別に表示する閾値を指定します。この閾値以下の割合のスライスは1つのスライスにまとめて表示されます。 |
| title | string | グラフのタイトルを指定します。 |
| titleTextStyle | objecgt | グラフのタイトルのテキストスタイルを指定します。 |
| tooltip | objecgt | ツールチップのプロパティを指定します。 |
| tooltip.showColorCode | boolean | trueの場合、ツールチップに各スライスの色の正方形を表示します。 |
| tooltip.text | text | ツールチップに表示する内容を指定します。　有効な値は'value'(値), 'percentage'(割合), 'both'(値と割合) |
| tooltip.textStyle | object | ツールチップのテキストスタイルを指定します。 |
| tooltip.trigger | string | ツールチップを表示させる方法を指定します。　有効な値は'focus'(要素にrolloverしたら表示), 'selection'(要素を選択したら表示), 'none'(ツールチップを表示しない)　 ※selectionを指定した際reverseCategoriesにtrueを指定していると、選択した要素と表示されるツールチップが一致しません。 |
| width | number | グラフの幅を指定します。 |