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

ローソク足チャート

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

Overview
例
読み込んでいます
データ形式
構成オプション
メソッド
イベント
データポリシー

概要

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 列目の値より小さい場合は緑色、そうでない場合は赤色になります。
Col 3: このマーカーの終了値（最終値）を指定する数値です。ローソク足のボックスのもう一方の端となります。ローソクが列 2 の値より小さい場合は赤、そうでない場合は緑色になります。
列 4: このマーカーの高い値（最大値）を指定する数値。これが黒い線の上部です。

構成オプション

ローソク足チャートでは、汎用イメージチャートでサポートされているオプションに加えて、次のオプションがサポートされています。

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

メソッド

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

イベント

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

データポリシー

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