ローソク足チャート

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

  1. Overview
  2. 例
  3. 読み込んでいます
  4. データ形式
  5. 構成オプション
  6. メソッド
  7. イベント
  8. データポリシー

概要

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 のロギング ポリシーをご覧ください。