まだ使ったことがあるのは timeline だけ。
- ライブラリをロードする
- 描画しようとする グラフタイプ だけ、 google.charts.load でロードする
- 最初の引数 : 読み込むバージョン番号 (String)
- current とした場合は最新バージョン
- upcoming とした場合は次期テストバージョン
- 二つ目の引数 : グラフの種類
- こんな感じ {packages: ['corechart', 'table', 'sankey']}
- packages, language, callback, mapsApiKey
- callback : 次の setOnLoadCallback で指定する関数をここで指定することもできる。
- google.charts.setOnLoadCallback で描画する関数を指定する。
- グローバルでユニークな名称とすること。
- サンプルでは "drawChart" で描画する
流れ
色
optionにcolorsを指定。chart.draw(data,option)のoption。
option = { colors : ['#000000','#111111']}
再描画
画面リサイズ時
<script>
...
var chart;
...
google.setOnLoadCallback(function () {
data = google.visualization.arrayToDataTable();
options = { title: '会社業績' ;}
chart = new google.visualization.LineChart(document.getElementById('gct_resizable_chart'));
chart.draw(data, options); );}
</script>
<body onresize="chart.draw(...)">
リサイズ時の関数に使う、chartなどの変数宣言を、setOnLoadCallbackの外で行っておくことがポイント
グラフの要素を選んだ時に何かを動作させる
とりあえずtimeline chartのばあい、以下をイベントリスナー addlistener に設定
- getSelectionで、選ばれた要素のオブジェクトを取得する。
- 複数選ばれることもある？配列で渡されるみたい
- 配列の一要素に、（グラフの元になった）行（、列）がどこか？という情報が入っている
- データが入っているオブジェクトに対して.getValue か .getFormattedValueでとりだす。
最終更新：2017年01月15日 22:04
