このページは Cloud Translation API によって翻訳されました。

可視化: モーショングラフ

Overview
例
読み込んでいます
初期状態の設定
データ形式
構成オプション
メソッド
イベント
データポリシー
Notes

概要

複数のインジケーターを経時的に探索できる動的グラフ。グラフは Flash を使用してブラウザ内でレンダリングされます。

デベロッパー向けの注意: Flash のセキュリティ設定により、ウェブサーバーの URL（http://www.myhost.com/myviz.html など）ではなく、ブラウザのファイルの場所（file:///c:/webhost/myhost/myviz.html など）からアクセスすると、Flash のセキュリティ設定（および Flash ベースの可視化）が正しく機能しない可能性があります。通常、これはテスト中の問題です。この問題を解決するには、Adobe のウェブサイトをご覧ください。

例

（次のコードは、ローカルファイルとして読み込んだ場合は機能しません。ウェブサーバーから読み込む必要があります）。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

読み込んでいます

google.charts.load パッケージ名は "motionchart" です。

  google.charts.load('current', {'packages': ['motionchart']});

ビジュアリゼーションのクラス名は google.visualization.MotionChart です。

  var visualization = new google.visualization.MotionChart(container);

データ形式

最初の列 は「string」型にし、エンティティ名（例:上記の例では「リンゴ」、「オレンジ」、「バナナ」など）。
2 番目の列には時間の値を含める必要があります。時刻は次のいずれかの形式で表すことができます。
- 年 - 列の型は「number」です。（例: 2008）。
- 月、日、年 - 列の型は「date」です。値は JavaScript の Date インスタンスである必要があります。
- 週番号 - 列の型は「string」です。値にはパターン「YYYYWww」を使用します。これは ISO 8601 に準拠しています。例: 「2008W03」。
- Quarter - 列の型は「string」です。値のパターンは YYYYQq の形式にする必要があります。これは ISO 8601 に準拠しています。例: 「2008Q3」。
後続の列は「number」型または「string」型になります。X 軸、Y 軸、色軸、サイズ軸のプルダウンメニューに数値の列が表示されます。文字列の列は、色のプルダウンメニューにのみ表示されます。上記の例をご覧ください。

初期状態の設定

モーショングラフが特定の状態（選択した一連のエンティティとビューのカスタマイズ）から開始するように指定できます。そのためには、まずグラフを作成して表示し、次にグラフに表示する状態の変更（値の選択、設定の変更など）を行い、その設定を文字列としてエクスポートし、最後にコード内でこの文字列を使用して「state」オプションに割り当てます。次の 2 つのセクションでは、状態コードをエクスポートして使用する方法を説明します。

作業中のグラフを開き、キャプチャする設定を指定します。指定できる設定には、不透明度レベル、ズーム、対数スケーリングと線形スケーリングなどがあります。
グラフの右下にあるレンチ記号をクリックして、[設定] パネルを開きます。
左下隅の [詳細] リンクをクリックして、[詳細] パネルをセットに追加します。
[Advanced] パネルを開き、[State] テキストボックスの内容をクリップボードにコピーします。（注: ステップ 2 ～ 4 で説明するメニューを使用する代わりに、getState() を呼び出して現在の状態をメッセージボックスに表示するボタンをページに挿入することもできます）。
前のステップでコピーした state 文字列を、コードの state オプションパラメータ（以下を参照）に割り当てます。draw() メソッドに渡されると、グラフは起動時に指定された状態に初期化されます。

var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

構成オプション

名前	タイプ	デフォルト	説明
身長	数値	300	グラフの高さ（ピクセル単位）。
幅	数値	500	グラフの幅（ピクセル単位）。
state	string	なし	グラフの初期表示状態。これはシリアル化された JSON オブジェクトで、ズームレベル、選択されたサイズ、選択されたバブル/エンティティ、その他の状態の説明を記述します。設定方法については、初期状態の設定をご覧ください。
showChartButtons	boolean	true	false の場合、右上隅のグラフの種類（バブル / 折れ線 / 列）を制御するボタンを非表示にします。
showHeader	boolean	true	false は、エンティティのタイトルラベルを非表示にします（データテーブルの最初の列のラベルから派生します）。
showSelectListComponent	boolean	true	false は、表示されるエンティティのリストを非表示にします。
showSidePanel	boolean	true	false は右側のパネルを非表示にします。
showXMetricPicker	boolean	true	false の場合、x の指標選択ツールが非表示になります。
showYMetricPicker	boolean	true	false の場合、y の指標選択ツールが非表示になります。
showXScalePicker	boolean	true	false の場合、x のスケール選択ツールが非表示になります。
showYScalePicker	boolean	true	false の場合、y のスケール選択ツールが非表示になります。
showAdvancedPanel	boolean	true	false にすると、設定パネルのオプションコンパートメントが無効になります。

メソッド

メソッド	戻り値の型	説明
`draw(data, options)`	none	指定されたオプションでグラフを描画します。
`getState()`	string	モーションチャートの現在のstateを JSON 文字列にシリアル化して返します。この状態をグラフに割り当てるには、この文字列を `draw()` メソッドの `state` オプションに代入します。これは多くの場合、デフォルトの状態を使用する代わりに、起動時にカスタムグラフの状態を指定するために使用されます。

イベント

名前	説明	プロパティ
`error`	グラフのレンダリング中にエラーが発生したときに呼び出されます。	id、message
ready	グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、描画メソッドを呼び出す前にこのイベントのリスナーをセットアップし、イベントが発生した後にのみ呼び出す必要があります。	なし
状態変更	ユーザーがなんらかの形でグラフを操作しました。`getState()` を呼び出して、グラフの現在の状態を確認します。	なし

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。

注

ウェブサーバーの URL（例: http://www.myhost.com/myviz.html）ではなく、ブラウザ内のファイルの場所（例: file:///c:/webhost/myhost/myviz.html）からアクセスした場合は、Flash のセキュリティ設定により、この設定（およびすべての Flash ベースの可視化）が正しく機能しない可能性があります。通常、これはテスト上の問題です。この問題は、Macromedia のウェブサイトに記載されている方法で解決できます。

可視化: モーション グラフ

概要

例