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

ろうそく立ての画像グラフ

重要: Google グラフツールの画像グラフ部分は、2012 年 4 月 20 日をもって正式に非推奨になりました。サポート終了ポリシーに従って、引き続き機能します。

概要
サンプル
読み込み中
データ形式
構成オプション
Methods
イベント
データポリシー

概要

Google Charts API を使って画像としてレンダリングされるローソク足チャート。

ローソク足チャートは、合計の差異の上に開始値と終了値を重ね合わせて表示するのに使用されます。株価の動きを示すために、ローソク足チャートがよく使用されます。このグラフでは、開始値が終了値よりも小さいアイテムが緑色で描画され、開始値が終了値より大きいアイテムは赤色で描画されます。詳しくは、Google Charts API のキャンドルスティックのドキュメントをご覧ください。

例

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

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

読み込み中

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

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

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

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

データ形式

5 つの列（各行は 1 つのローソク足マーカーを表す）

Col 0: X 軸でこのマーカーのラベルとして使用される文字列。
列 1: このマーカーの下限値または最小値を指定する数値。これが黒い線の土台です。
列 2: このマーカーの開始値または初期値を指定する数値。ローソク足のボックスの片方の端となります。列 3 の値未満の場合、キャンドルは緑色、そうでない場合は赤色になります。
列 3: このマーカーの終値または終値を指定する数値。ローソク足のボックスのもう一方の端となります。列 2 の値よりも小さい場合、キャンドルは赤色になります。そうでない場合は、緑色になります。
列 4: このマーカーの上限値を示す数値。黒い線の最上部です。

設定オプション

汎用画像グラフでサポートされているオプションに加え、キャンドルスティックグラフでは次のオプションがサポートされています。

名前	タイプ	Default	説明
backgroundColor	文字列	「#FFFFFF」（白）	グラフの背景色。これは #RRGGBB の文字列で、# 記号を含みます。
表示 AxisLine	boolean	true	軸線を表示するかどうか。false に設定すると、軸ラベルも表示されなくなります。
高さ	数値	要素の高さ	グラフの高さ（ピクセル単位）。30 < 高さまたは高さ > 1,000 の場合、この値はデフォルトで 200 になります。
最高	数値	データの最大値	Y 軸の最大値です。
分	数値	データの最小値	Y 軸の最小値。
表示カテゴリラベル	boolean	true	false の場合、X 軸ラベルは非表示になります。
ShowValueLabels	boolean	true	false の場合、Y 軸のラベルは非表示になります。
showValueLabelsInternal	数値	自動	Y 軸ラベルの間隔（ピクセル単位）。
title	文字列	''	グラフの上に表示するテキスト。
width	数値	要素を含む要素の幅	グラフの幅（ピクセル単位）です。幅が 30 より小さいか 1,000 より大きい場合、幅は 300 に設定されます。

メソッド

メソッド	戻り値の型	説明
`draw(data, options)`	none	グラフを描画します。

イベント

登録すると、汎用画像のグラフページに記載されているイベントを聞くことができます。

データポリシー

Chart API のロギングポリシーをご覧ください。