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

視覚化: モーションチャート

概要
サンプル
読み込み中
初期状態の設定
データ形式
構成オプション
Methods
イベント
データポリシー
備考

概要

複数の指標の推移を時系列で表示する動的グラフ。グラフはブラウザ内で Flash を使用してレンダリングされます。

デベロッパー向けの注意: Flash セキュリティ設定により、ウェブサーバーの URL（例: http://www.myhost.com/myviz.html）ではなく、ブラウザのファイルの場所（例: file:///c:/webhost/myhost/myviz.html）からアクセスした場合、正しく動作しないことがあります。これは通常、テストに関する問題のみです。この問題は、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
- 月、日、年 - 列の型: 「日付」、値は JavaScript の Date インスタンスです。
- 週番号 - 列の型: '文字列'; 値には YYYYWww の形式を使用する必要があります。これは ISO 8601 に準拠します。例: '2008W03'。
- 四半期 - 列の型: '文字列'; 値のパターンは YYYYQq にする必要があります。これは ISO 8601 に準拠しています。例: 2008Q3。
後続の列は「number」または「string」型にすることができます。X 軸、Y 軸、色軸、サイズ軸のプルダウンメニューに数値列が表示されます。文字列の列は、[色] プルダウンメニューにのみ表示されます。上記の例をご覧ください。

初期状態の設定

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

作業中のグラフを開き、記録する設定を指定します。指定できる設定には、不透明度レベル、ズーム、対数スケーリングと線形スケーリングがあります。
グラフの右下にあるレンチアイコンをクリックして、設定パネルを開きます。
左下にある [詳細] リンクをクリックして、[詳細設定] パネルをセットに追加します。
[詳細設定] パネルを開いて、[状態] テキストボックスの内容をクリップボードにコピーします。（注: 手順 2 ～ 4 のメニューを使用する代わりに、getState() を呼び出し、メッセージの状態に現在の状態を表示するボタンをページに挿入できます）。
前の手順でコピーした状態文字列を、コードの「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);

設定オプション

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

メソッド

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

イベント

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

データポリシー

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

注意事項

Flash セキュリティ設定により、ウェブサーバーの URL（例: http://www.myhost.com/myviz.html）ではなく、ブラウザのファイルの場所（file:///c:/webhost/myhost/myviz.html など）からアクセスした場合、正しく動作しないことがあります。これは通常、テストに関する問題のみです。この問題は、Macromedia のウェブサイトで説明されているとおり解決できます。

視覚化: モーション チャート

概要

例