ろうそく立てチャート

概要

インタラクティブなローソク足チャート。

ローダスト チャートは、開始値と終了値を合計分散に重ね合わせて表示するのに使用されます。株価の動きを示すために、ローソク足チャートがよく使用されます。このグラフでは、開始値が終了値(ゲイン)よりも小さいアイテムが塗りつぶされたボックスとして描画され、開始値が終了値より大きい値(損失)が白丸のボックスとして描画されます。

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

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

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

ウォーターフォール チャート

適切なオプションのセットを使用することで、シンプルなウォーターフォール チャートに似せてローソク足チャートを作成できます。

以下のコードでは、1 列目と 2 列目に同じ値を持たせることでトップ ウィックを排除し、3 列目と 4 列目に同じ値を持たせるボトムウィックを排除しています。bar.groupWidth'100%' に設定して、バー間のスペースを削除しました。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Mon', 28, 28, 38, 38],
          ['Tue', 38, 38, 55, 55],
          ['Wed', 55, 55, 77, 77],
          ['Thu', 77, 77, 66, 66],
          ['Fri', 66, 66, 22, 22]
          // Treat the first row as data.
        ], true);

        var options = {
          legend: 'none',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
          }
        };

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

現時点では、バーにラベルを付ける簡単な方法はありません。オーバーレイを使用することをおすすめします。

読み込み中

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

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

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

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

データ形式

5 つ以上の列。最初の列は X 軸の値またはグループラベルを定義し、その後の 4 つのデータ列の倍数ごとに異なる列を定義します。

  • 列 0: X 軸にグループラベルとして使用される文字列(非連続)。X 軸に値として使用する数値、日付、日時、または時刻(連続)
  • 列 1: このマーカーの下限値または最小値を指定する数値。 キャンドルの中心線の土台です。列ラベルは凡例の系列ラベルとして使用されます(他の列のラベルは無視されます)。
  • 列 2: このマーカーの開始値または初期値を指定する数値。 ローソク足のボックスの片方の端となります。列 3 の値未満の場合、キャンドルは塗りつぶされます。それ以外の場合、白丸になります。
  • 列 3: このマーカーの終値または終値を指定する数値。キャンドルの 2 番目の垂直の枠線です。列 2 の値より小さい場合、キャンドルは中が空欄になり、塗りつぶされます。
  • 列 4: このマーカーの最大値または最大値を指定する数値。ローソク足の中央線の上端となります。
  • 列 5 [省略可]: キャンドルのツールチップまたはスタイルの列。
系列を増やすために、列 1 ~ 4 と同様の構造を持つ 4 つの列のセットを追加できます。このような各セットは、別の一連のキャンドルスティックを表します。列の総数は、系列の 4 倍で 1 を足します(任意のツールチップ列も追加できます)。

設定オプション

名前
aggregateTarget
複数のデータの選択がツールチップにどのように統合されるか:
  • 'category': 選択したデータを x 値別にグループ化します。
  • 'series': 選択したデータを時系列でグループ化します。
  • 'auto': 選択したデータを同じ x 値を持つ場合は x 値でグループ化し、それ以外の場合は系列でグループ化します。
  • 'none': 選択項目ごとに 1 つのツールチップのみを表示します。
aggregationTarget は多くの場合、selectionModetooltip.trigger と組み合わせて使用されます。以下に例を示します。
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
型: string
デフォルト: 「auto」
Animation.duration

アニメーションの長さ(ミリ秒単位)。詳細については、アニメーションのドキュメントをご覧ください。

タイプ: 数値
デフォルト: 0
image.easing

アニメーションに適用するイージング関数。以下のオプションを使用できます。

  • 「linear」- 固定の速度。
  • 'in' - イーズイン - ゆっくりと始めて速く。
  • 「out」- イーズアウト - 速く、ゆっくりと。
  • 「inAndOut」 - イーズインとイーズアウト - 最初はゆっくりとスピードを上げ、その後遅くします。
型: string
デフォルト: 「リニア」
Animation.startup

初回描画時にグラフをアニメーション化するかどうかを指定します。true の場合、グラフはベースラインから開始して、最終状態にアニメーション化します。

型: boolean
デフォルト: false
軸タイトルの位置

軸のタイトルを配置する場所(グラフ領域との比較)サポートされている値:

  • in - グラフ領域内に軸のタイトルを描画します。
  • out - 軸領域をグラフ領域の外側に描画します。
  • none - 軸のタイトルを省略します。
型: string
デフォルト: 'out'
backgroundColor

グラフのメイン領域の背景色。単純な HTML カラー文字列、たとえば 'red''#00cc00'、または以下のプロパティを持つオブジェクトのいずれかです。

タイプ: 文字列またはオブジェクト
デフォルト: '白'
backgroundColor.stroke

グラフの枠線の色(HTML の色文字列)。

型: string
デフォルト: '#666'
backgroundColor.strokeWidth

枠線の幅(ピクセル単位)。

タイプ: 数値
デフォルト: 0
backgroundColor.fill

グラフの塗りつぶしの色。HTML の色文字列で指定します。

型: string
デフォルト: '白'
bar.groupWidth
次のいずれかの形式で指定されたキャンドルスティックのグループの幅。
  • ピクセル数(例: 50)。
  • 各グループで使用可能な幅の割合(「20%」など)。「100%」はグループ間にスペースがないことを意味します。
タイプ: 数値または文字列
デフォルト: 黄金比。約 61.8%。
キャンドルスティック.hollowIsRising

true の場合、上がったキャンドルは白色で表示され、下がったキャンドルは点灯します。

型: boolean
デフォルト: false(後で true に変更される)
キャンドルスティック.fallingColor.fill

落下キャンドルの塗りつぶし色。HTML の色文字列で指定します。

型: string
デフォルト: auto(シリーズの色と hollowIsRising によって異なる)
キャンドルスティック.フォールカラー

落下するキャンドルのストロークの色(HTML カラー文字列)。

型: string
デフォルト: 自動(シリーズカラー)
キャンドルスティック.fallingColor.strokeWidth

落下キャンドルのストローク幅(HTML カラー文字列)。

タイプ: 2
デフォルト: 数値
キャンドルスティック.riseColor.fill

上昇するキャンドルの塗りつぶし色(HTML カラー文字列)。

型: string
デフォルト: auto(白またはシリーズカラー(hollowIsRising に応じて))
キャンドルスティック.riseColor.stroke

上昇するキャンドルのストロークの色を HTML カラー文字列で指定します。

型: string
デフォルト: auto(シリーズの色または白(hollowIsRising に応じて))
キャンドルスティック.riseColor.strokeWidth

上昇するキャンドルのストローク幅(HTML カラー文字列)。

タイプ: 数値
デフォルト: 2
グラフ領域

メンバーがグラフ領域の配置とサイズを設定するためのオブジェクト(グラフ自体が描画される軸と凡例を除く)。数字と、それに続く % の 2 つの形式がサポートされています。単純な数値はピクセル単位で表される値であり、数値の後に % が続く率がパーセンテージです。例: chartArea:{left:20,top:0,width:'50%',height:'75%'}

タイプ: オブジェクト
デフォルト: null
ChartArea.backgroundColor
グラフ領域の背景色。文字列を使用する場合、16 進文字列(例:「#fdc」)または英語の色名で指定してください。オブジェクトを使用する場合、以下のプロパティを指定できます。
  • stroke: 色。16 進数文字列または英語の色名で指定します。
  • strokeWidth: 指定する場合、指定された幅(stroke の色)のグラフ領域を囲む枠線を描画します。
タイプ: 文字列またはオブジェクト
デフォルト: '白'
ChartArea.left

グラフの左枠線からの距離。

タイプ: 数値または文字列
デフォルト: 自動
ChartArea.top

グラフの上枠線からの距離。

タイプ: 数値または文字列
デフォルト: 自動
ChartArea.width

グラフの領域の幅。

タイプ: 数値または文字列
デフォルト: 自動
ChartArea.height

グラフの領域の高さ。

タイプ: 数値または文字列
デフォルト: 自動

グラフの要素に使用する色。文字列の配列。各要素は HTML の色文字列です(例: colors:['red','#004411'])。

型: 文字列の配列
デフォルト: デフォルトの色
enableInteractivity

グラフでユーザーベースのイベントがスローされるか、ユーザー操作に反応するか。false の場合、グラフは「select」やその他の操作ベースのイベント(準備完了イベントやエラーイベントをスローしません)をスローせず、ユーザー入力に応じてホバーテキストを表示するなど、変化しません。

型: boolean
デフォルト: true
focusTarget

マウスオーバーでフォーカスを受け取るエンティティのタイプ。マウスクリックで選択されるエンティティや、イベントに関連付けられるデータテーブル要素にも影響します。値は次のいずれかになります。

  • 'datum' - 単一のデータポイントにフォーカス。データテーブルのセルと相関します。
  • 「カテゴリ」 - 主軸に沿ったすべてのデータポイントをグループ化します。データテーブルの行と相関します。

focusTarget 'category' では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる時系列の値を比較する際に役立ちます。

型: string
デフォルト: 'datum'
fontSize

グラフ内のすべてのテキストのデフォルトのフォントサイズ(ピクセル単位)です。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。

タイプ: 数値
デフォルト: 自動
フォント名

グラフ内のすべてのテキストのデフォルトのフォント フェイス。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。

型: string
デフォルト: 「Arial」
forceIFrame

インライン フレーム内にグラフを描画します。(IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます)。

型: boolean
デフォルト: false

メンバーがさまざまな横軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
タイプ: オブジェクト
デフォルト: null
hAxis.baseline

横軸のベースライン。

このオプションは continuous 軸でのみサポートされています。

タイプ: 数値
デフォルト: 自動
hAxis.baselineColor

横軸のベースラインの色。任意の HTML 色文字列(例: 'red''#00cc00')を指定できます。

このオプションは continuous 軸でのみサポートされています。

タイプ: 数値
デフォルト: 'black'
hAxis.direction

横軸の値の増加方向。値の順序を逆にするには、-1 を指定します。

タイプ: 1 または -1
デフォルト: 1
hAxis.format

数値または日付の軸ラベルの形式文字列。

数値軸ラベルの場合、これは ICU パターンセット 10 進形式のサブセットです。たとえば {format:'#,###%'} は、値が 10、7.5、0.5 の場合は「1,000%」、「750%」、「50%」と表示されます。次のいずれかを指定することもできます。

  • {format: 'none'}: 数値を書式設定せずに表示します(8000000)
  • {format: 'decimal'}: 数値を千桁の区切りで表示します(例:8,000,000)
  • {format: 'scientific'}: 数値を科学的表記で表示します(8e6)
  • {format: 'currency'}: 現地通貨での数値を表示します(例:8,000,000.00 ドル)
  • {format: 'percent'}: 数値をパーセンテージで表示します(800,000,000%)
  • {format: 'short'}: 短縮番号を表示します(例:800 万)
  • {format: 'long'}: 数値を完全な単語として表示します(800 万)

日付の軸ラベルの場合、これは日付形式の ICU パターンセットのサブセットです。たとえば、{format:'MMM d, y'} には 2011 年 7 月 1 日を表す「Jul 1, 2011」という値が表示されます。

ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。

ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は format:"#" を指定しますが、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

このオプションは、continuous 軸でのみサポートされています。

型: string
デフォルト: 自動
hAxis.gridlines

横軸のグリッド線を構成するプロパティを持つオブジェクト。 横軸のグリッド線は縦に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。

{color: '#333', minSpacing: 20}

このオプションは、continuous 軸でのみサポートされています。

タイプ: オブジェクト
デフォルト: null
hAxis.gridlines.color

グラフ領域内の水平グリッド線の色有効な HTML 色の文字列を指定します。

型: string
デフォルト: '#CCC'
hAxis.gridlines.count

グラフ領域内の水平グリッド線のおおよその数。 gridlines.count に正の数を指定すると、グリッド間の minSpacing の計算に使用されます。1 つのグリッド線だけを描画する場合は 1、グリッドを描画しない場合は 0 の値を指定します。デフォルトの -1 を指定すると、他のオプションに基づいてグリッド線の数が自動的に計算されます。

タイプ: 数値
デフォルト: -1
hAxis.gridlines.interval

隣接するグリッド線間のサイズ(ピクセルではないデータ値)。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される gridlines.units.<unit>.interval オプションに似ています。線形目盛の場合、デフォルトは [1, 2, 2.5, 5] です。つまり、グリッド線の値はすべての単位(1)、偶数単位(2)、または 2.5 または 5 の倍数になります。これらの値の 10 倍の累乗も考慮されます(例: [10, 20, 25, 50] と [.1, .2, .25, .5])。 ログスケールの場合、デフォルトは [1, 2, 5] です。

タイプ: 1 ~ 10(10 は含まない)。
デフォルト: 計算
hAxis.gridlines.minSpacing

hAxis メジャーのグリッド線間の最小画面スペース(ピクセル単位)です。主要なグリッド線のデフォルトは、線形目盛の場合は 40、対数目盛の場合は 20 です。minSpacing ではなく count を指定すると、minSpacing がカウントから計算されます。逆に、count ではなく minSpacing を指定した場合、カウントは minSpacing から計算されます。両方を指定すると、minSpacing がオーバーライドされます。

タイプ: 数値
デフォルト: 計算
hAxis.gridlines.multiple

グリッド線と目盛りの値は、このオプションの値の倍数にする必要があります。間隔とは異なり、倍数の 10 倍は考慮されません。gridlines.multiple = 1 を指定してティックを整数に強制することも、gridlines.multiple = 1000 を指定してティックを 1, 000 の倍数にすることもできます。

タイプ: 数値
デフォルト: 1
hAxis.gridlines.units

グラフで計算されたグリッド線を使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

詳細については、日付と時刻をご覧ください。

タイプ: オブジェクト
デフォルト: null
hAxis.minorGridlines

横軸にマイナー グリッドラインを構成するメンバーを含むオブジェクト(hAxis.gridlines オプションと同様)。

このオプションは、continuous 軸でのみサポートされています。

タイプ: オブジェクト
デフォルト: null
hAxis.minorGridlines.color

グラフ領域の横並びのマイナー グリッド線の色。有効な HTML 色の文字列を指定します。

型: string
デフォルト: グリッド線と背景色のブレンド
hAxis.minorGridlines.interval

マイナー Gridlines.interval オプションは、主要なグリッドライン間隔オプションに似ていますが、選択される間隔は常に、主要なグリッド線間隔の偶数です。線形目盛のデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数目盛の間隔は [1, 2, 5] です。

タイプ: 数値
デフォルト: 1
hAxis.minorGridlines.minSpacing

隣接するマイナー グリッド線、マイナー グリッド、メジャー グリッド間の最小スペース(ピクセル単位)。デフォルト値は、線形目盛の主要なグリッド線の minSpacing の 1/2、ログスケールの minSpacing の 1/5 です。

タイプ: 数値
デフォルト: computed
hAxis.minorGridlines.multiple

メジャー gridlines.multiple の場合と同じです。

タイプ: 数値
デフォルト: 1
hAxis.minorGridlines.count

minorGridlines.count オプションは、カウントを 0 に設定してマイナー グリッドラインを無効にすることを除き、ほとんどを非推奨にしています。マイナー グリッド線の数は、主要グリッド線(hAxis.gridlines.interval を参照)と必要な最小スペース(hAxis.minorGridlines.minSpacing を参照)の間隔によって変わります。

タイプ: 数値
デフォルト: 1
hAxis.minorGridlines.units

グラフの計算のマイナー グリッドラインで使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

詳細については、日付と時刻をご覧ください。

タイプ: オブジェクト
デフォルト: null
hAxis.logScale

hAxis プロパティ。横軸を対数スケールにします(すべての値が正の値である必要があります)。はいの場合は true に設定します。

このオプションは continuous 軸でのみサポートされています。

型: boolean
デフォルト: false
hAxis.scaleType

hAxis プロパティ。横軸を対数スケールにする。次のいずれか 1 つを指定できます。

  • null - 対数目盛は実行されません。
  • 'log' - 対数目盛。負の値とゼロの値はプロットされません。このオプションは、hAxis: { logscale: true } を設定する場合と同じです。
  • 'mirrorLog' - 負の値をゼロにプロットする対数スケーリング。プロットされた負の数値は、絶対値の対数の負数です。0 に近い値は線形スケールでプロットされます。

このオプションは continuous 軸でのみサポートされています。

型: string
デフォルト: null
hAxis.textPosition

グラフの領域に対する水平軸のテキストの位置。サポートされている値: out、in、none。

型: string
デフォルト: 'out'
hAxis.textStyle

横軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

自動生成された X 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値(数値、日付、日時、時刻など)またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の v プロパティと、ラベルとして表示されるリテラル文字列を含むオプションの f プロパティが必要です。

オーバーライドする viewWindow.min または viewWindow.max を指定しない限り、viewWindow は自動的に最小ティックと最大ティックを含むように拡張されます。

例:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

このオプションは、continuous 軸でのみサポートされています。

型: 要素の配列
デフォルト: 自動
hAxis.title

hAxis プロパティは、横軸のタイトルを指定します。

型: string
デフォルト: null
hAxis.titleTextStyle

横軸のタイトル テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

false の場合、グラフのコンテナによって切り抜きが行われるのではなく、最も外側のラベルが非表示になります。true の場合、ラベルの切り抜きが許可されます。

このオプションは discrete 軸でのみサポートされています。

型: boolean
デフォルト: false
hAxis.slantedText

true の場合は、軸に沿ってテキストをテキストを斜めに描画します。その軸に沿ってテキストをさらに表示する場合は false を指定します。false の場合は、テキストを横向きにします。デフォルトの動作では、まっすぐに描画してもテキストの一部が収まらない場合は、そのテキストを傾けます。このオプションは、hAxis.textPosition が「out」(デフォルト)に設定されている場合にのみ使用できます。日付と時刻は、デフォルトは false です。

型: boolean
デフォルト: 自動
hAxis.slantedTextAngle

水平軸のテキストの角度(傾斜で描画された場合)。hAxis.slantedTextfalse であるか、自動モードであり、グラフでテキストを水平方向に描画すると、無視されます。角度が正の場合、回転は反時計回り、負の場合は時計回りです。

タイプ: 数値、-90 ~ 90
デフォルト: 30
hAxis.maxAlternation

横軸のテキストの最大レベル数。軸のテキストラベルが密集しすぎると、サーバーは、ラベルを密結合するために、隣接するラベルを上下にシフトする可能性があります。この値は、使用するレベルの最大数を指定します。ラベルが重ならないようにする場合、サーバーはより少ないレベルを使用できます。日付と時刻のデフォルトは 1 です。

タイプ: 数値
デフォルト: 2
hAxis.maxTextLine

テキストラベルで使用できる最大行数。ラベルが長すぎる場合、複数行にまたがることがあります。また、デフォルトで行数は使用可能なスペースの高さによって制限されます。

タイプ: 数値
デフォルト: 自動
hAxis.minTextSpacing

隣接する 2 つのテキストラベル間の最小水平方向の間隔(ピクセル単位)。ラベルの密度が高すぎる場合や間隔が長すぎると、間隔がこのしきい値を下回ることがあります。この場合、ラベルの整理されていないメジャーのいずれかが適用されます(ラベルの切り詰めや一部のラベルの削除など)。

タイプ: 数値
デフォルト: hAxis.textStyle.fontSize の値
hAxis.showTextEvery

表示する横軸のラベルの数。1 はすべてのラベル、2 は他のすべてのラベルを表します。デフォルトでは、できる限り多くのラベルを重複なしで表示しようとします。

タイプ: 数値
デフォルト: 自動
hAxis.maxValue

横軸の最大値を指定の値に移動します。これはほとんどのグラフで右向きです。データの最大 x 値より小さい値に設定されている場合は無視されます。 hAxis.viewWindow.max はこのプロパティをオーバーライドします。

このオプションは、continuous 軸でのみサポートされています。

タイプ: 数値
デフォルト: 自動
hAxis.minValue

横軸の最小値を指定の値に移動します。これはほとんどのグラフで左になります。データの最小 x 値より大きい値に設定されている場合は無視されます。 hAxis.viewWindow.min はこのプロパティをオーバーライドします。

このオプションは、continuous 軸でのみサポートされています。

タイプ: 数値
デフォルト: 自動
hAxis.viewWindowMode

横軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。

  • 「かなり」 - 最大値と最小値がグラフ領域の左右に少しだけレンダリングされるように、水平方向の値を拡大縮小します。viewWindow は、数値が最も近いメジャー グリッド線、または日時が最も近いマイナー グリッド線に拡張されます。
  • 「maximized」 - 最大値と最小値がグラフ領域の左右に接触するように水平値を拡大縮小します。これにより、haxis.viewWindow.minhaxis.viewWindow.max は無視されます。
  • 'explicit' - グラフ領域の左と右のスケール値を指定するための、非推奨のオプション。(haxis.viewWindow.minhaxis.viewWindow.max を冗長化しているため非推奨です)。これらの値以外のデータ値はトリミングされます。表示する最大値と最小値を示す hAxis.viewWindow オブジェクトを指定する必要があります。

このオプションは、continuous 軸でのみサポートされています。

型: string
デフォルト: 「tyly」と同じですが、使用される場合には haxis.viewWindow.minhaxis.viewWindow.max が優先されます。
hAxis.viewWindow

横軸の切り抜き範囲を指定します。

タイプ: オブジェクト
デフォルト: null
hAxis.viewWindow.max
  • continuous 軸の場合:

    レンダリングする水平方向のデータ値の上限。

  • discrete 軸の場合:

    トリミング ウィンドウが終了するまでのゼロベースの行インデックス。このインデックス以上のデータポイントがトリミングされます。vAxis.viewWindowMode.min と組み合わせて使用し、表示する要素インデックスを示す半開き範囲(最小値、最大値)を定義します。つまり、min <= index < max のようなすべてのインデックスが表示されます。

hAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

タイプ: 数値
デフォルト: 自動
hAxis.viewWindow.min
  • continuous 軸の場合:

    レンダリングする最小水平データ値。

  • discrete 軸の場合:

    トリミング ウィンドウの開始位置を示す 0 から始まる行インデックス。これより小さいインデックスのデータポイントはトリミングされます。vAxis.viewWindowMode.max と組み合わせて使用し、表示する要素インデックスを示す半開き範囲(最小値、最大値)を定義します。つまり、min <= index < max のようなすべてのインデックスが表示されます。

hAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

タイプ: 数値
デフォルト: 自動
高さ

グラフの高さ(ピクセル単位)。

タイプ: 数値
デフォルト: 要素を格納する高さ
凡例

メンバーがさまざまな要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
タイプ: オブジェクト
デフォルト: null
凡例.alignment

凡例の配置。次のいずれか 1 つを指定できます。

  • 「start」 - 凡例に割り当てられた領域の始まりと一致します。
  • 'center' - 凡例に割り当てられた領域の中心に配置されます。
  • 'end' - 凡例に割り当てられた領域の終端に合わせます。

凡例の中心の開始、中央、終了は、スタイル(垂直または水平)を基準とします。たとえば、「右」の凡例では「開始」と「終了」がそれぞれ上部と下部に存在します。「上部」の凡例の場合、「開始」と「終了」はそれぞれ領域の左側と右側になります。

デフォルト値は、凡例の位置によって異なります。「凡例」のデフォルトは、デフォルトは「センター」、その他の凡例は「開始」です。

型: string
デフォルト: 自動
凡例.maxLines

凡例の最大行数。複数の行に設定すると、凡例に行が追加されます。注: レンダリングされる実際の行数を判断するために使用される正確なロジックは、まだ可変です。

現在、このオプションは凡例.position が「top」の場合にのみ動作します。

タイプ: 数値
デフォルト: 1
凡例.pageIndex

凡例で最初に選択した 0 から始まるページ インデックス。

タイプ: 数値
デフォルト: 0
凡例.position

凡例の位置。次のいずれか 1 つを指定できます。

  • 「bottom」 - グラフの下。
  • 「left」 - グラフの左端で、左軸に系列が関連付けられていない場合。そのため、左側に凡例を配置するには、オプション targetAxisIndex: 1 を使用します。
  • 'in' - グラフの左上にあります。
  • 'none' - 凡例は表示されません。
  • 「右」- グラフの右側。vAxes オプションと互換性がありません。
  • top - グラフの上部。
型: string
デフォルト: 「right」
凡例テキストスタイル

凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ページの向き

グラフの向き。'vertical' に設定すると、グラフの軸が回転して、たとえば縦棒グラフが棒グラフになり、面グラフが上ではなく右に成長します。

型: string
デフォルト: 'horizontal'
ReverseCategories

true に設定すると、右から左に時系列が描画されます。デフォルトでは、左から右に描画します。

このオプションは、discretemajor の軸でのみサポートされています。

型: boolean
デフォルト: false
セレクション モード

selectionMode'multiple' の場合、ユーザーは複数のデータポイントを選択できます。

型: string
デフォルト: 'single'
series

オブジェクトの配列。グラフ内の対応する系列の形式を記述します。系列のデフォルト値を使用するには、空のオブジェクト {} を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートします。

  • color - このシリーズで使用する色。有効な HTML 色の文字列を指定します。
  • fallingColor.fill - このシリーズのグローバル candlestick.fallingColor.fill 値をオーバーライドします。
  • fallingColor.stroke - このシリーズのグローバル candlestick.fallingColor.stroke 値をオーバーライドします。
  • fallingColor.strokeWidth - このシリーズのグローバル candlestick.fallingColor.strokeWidth 値をオーバーライドします。
  • labelInLegend - グラフの凡例に表示されるシリーズの説明。
  • risingColor.fill - このシリーズのグローバル candlestick.risingColor.fill 値をオーバーライドします。
  • risingColor.stroke - このシリーズのグローバル candlestick.risingColor.stroke 値をオーバーライドします。
  • risingColor.strokeWidth - このシリーズのグローバル candlestick.risingColor.strokeWidth 値をオーバーライドします。
  • targetAxisIndex - この系列を割り当てる軸。0 はデフォルトの軸、1 は反対軸です。デフォルト値は 0 です。1 に設定すると、異なる軸に対して異なる系列がレンダリングされるグラフが定義されます。デフォルトの軸に少なくとも 1 つの系列が割り当てられます。軸ごとに異なるスケールを定義できます。
  • visibleInLegend - ブール値。時系列に凡例のエントリが存在することを意味し、false は存在しないことを意味します。デフォルトは true です。

オブジェクトの配列を指定できます(配列は指定された順序で時系列に適用されます)。また、それぞれの子に、適用する時系列を示す数値キーが含まれるオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同一で、最初のシリーズは凡例で黒色で存在し、4 つ目のシリーズは凡例で赤色で存在し、存在しない場合は宣言します。

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
型: オブジェクトの配列、またはネストされたオブジェクトを含むオブジェクト
デフォルト: {}
テーマ

テーマとは、特定のグラフの動作や視覚効果を実現するために連携する一連の事前定義オプション値です。現在選択できるテーマは 1 つのみです。

  • 「maximized」 - グラフの領域を最大化し、グラフ領域内の凡例とすべてのラベルを描画します。以下のオプションを設定します。
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
型: string
デフォルト: null
title

グラフの上に表示するテキスト。

型: string
デフォルト: タイトルなし
titlePosition

グラフのタイトルを配置する場所(グラフ領域との比較)サポートされている値:

  • in - グラフ領域内にタイトルを描画します。
  • out - グラフ領域の外側にタイトルを描画します。
  • none - タイトルを省略します。
型: string
デフォルト: 'out'
titleTextStyle

タイトル テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ツールチップ

さまざまなツールチップ要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。

{textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
tooltip.ignoreBounds

true に設定すると、すべてのグラフでツールチップの描画がグラフの境界の外に流れるようにします。

注: これは HTML ツールチップにのみ適用されます。SVG ツールチップを有効にすると、グラフの境界外のオーバーフローはトリミングされます。詳しくは、ツールチップのコンテンツのカスタマイズをご覧ください。

タイプ: ブール値
デフォルト: false
tooltip.isHTML

true に設定した場合は、(SVG レンダリングではなく)HTML レンダリングのツールチップを使用します。詳しくは、ツールチップのコンテンツのカスタマイズをご覧ください。

注: ツールチップの列データロールを使用した HTML ツールチップのコンテンツのカスタマイズは、バブルチャートの可視化ではサポートされていません

型: boolean
デフォルト: false
tooltip.showColorCode

true の場合、ツールチップ内のシリーズ情報の横に色付きの正方形が表示されます。focusTarget が「category」に設定されている場合のデフォルトは true です。それ以外の場合のデフォルトは false です。

型: boolean
デフォルト: 自動
tooltip.textStyle

ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

ツールチップが表示されるユーザー操作:

  • 「focus」 - ユーザーが要素にカーソルを合わせると、ツールチップが表示されます。
  • 'none' - ツールチップは表示されません。
型: string
デフォルト: 「focus」
vAx

グラフに複数の縦軸がある場合、個々の縦軸のプロパティを指定します。 各子オブジェクトは vAxis オブジェクトであり、vAxis でサポートされているすべてのプロパティを含めることができます。これらのプロパティ値は、同じプロパティのグローバル設定をオーバーライドします。

複数の縦軸のグラフを指定するには、series.targetAxisIndex を使用して新しい軸を定義し、vAxes を使用して軸を構成します。次の例では、シリーズ 2 を右軸に割り当て、カスタムのタイトルとテキスト スタイルを指定しています。

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

このプロパティは、オブジェクトまたは配列のいずれかです。オブジェクトはオブジェクトの集合であり、各オブジェクトには、定義した軸を指定する数値ラベルがあります。これは上記の形式です。配列は、軸ごとに 1 つずつオブジェクトの配列です。たとえば、次の配列スタイルの表記は、上記の vAxis オブジェクトと同じです。

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
型: オブジェクトの配列、または子オブジェクトを含むオブジェクト
デフォルト: null
vAxis

メンバーがさまざまな垂直軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
タイプ: オブジェクト
デフォルト: null
vAxis.baseline

vAxis プロパティ: 縦軸のベースラインを指定します。ベースラインが最大のグリッド線よりも大きいか、または最小のグリッド線よりも小さい場合は、最も近いグリッド線に丸められます。

タイプ: 数値
デフォルト: 自動
vAxis.baselineColor

縦軸のベースラインの色を指定します。任意の HTML 色文字列(例: 'red''#00cc00')を指定できます。

タイプ: 数値
デフォルト: 'black'
vAxis.direction

縦軸の値の増加方向。デフォルトでは、低い値はグラフの下部に表示されます。値の順序を逆にするには、-1 を指定します。

タイプ: 1 または -1
デフォルト: 1
vAxis.format

数値軸ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば {format:'#,###%'} は、値が 10、7.5、0.5 の場合は「1,000%」、「750%」、「50%」と表示されます。次のいずれかを指定することもできます。

  • {format: 'none'}: 数値を書式設定せずに表示します(8000000)
  • {format: 'decimal'}: 数値を千桁の区切りで表示します(例:8,000,000)
  • {format: 'scientific'}: 数値を科学的表記で表示します(8e6)
  • {format: 'currency'}: 現地通貨での数値を表示します(例:8,000,000.00 ドル)
  • {format: 'percent'}: 数値をパーセンテージで表示します(800,000,000%)
  • {format: 'short'}: 短縮番号を表示します(例:800 万)
  • {format: 'long'}: 数値を完全な単語として表示します(800 万)

ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。

ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は format:"#" を指定しますが、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

型: string
デフォルト: 自動
vAxis.gridlines

メンバーが縦軸にグリッド線を設定するオブジェクト。 縦軸のグリッド線は横方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。

{color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: null
vAxis.gridlines.color

グラフ領域内の垂直グリッド線の色有効な HTML 色の文字列を指定します。

型: string
デフォルト: '#CCC'
vAxis.gridlines.count

グラフ領域内の水平グリッド線のおおよその数。 gridlines.count に正の数を指定すると、グリッド間の minSpacing の計算に使用されます。1 つのグリッド線だけを描画する場合は 1、グリッドを描画しない場合は 0 の値を指定します。デフォルトの -1 を指定すると、他のオプションに基づいてグリッド線の数が自動的に計算されます。

タイプ: 数値
デフォルト: -1
vAxis.gridlines.interval

隣接するグリッド線間のサイズ(ピクセルではないデータ値)。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される gridlines.units.<unit>.interval オプションに似ています。線形目盛の場合、デフォルトは [1, 2, 2.5, 5] です。つまり、グリッド線の値はすべての単位(1)、偶数単位(2)、または 2.5 または 5 の倍数になります。これらの値の 10 倍の累乗も考慮されます(例: [10, 20, 25, 50] と [.1, .2, .25, .5])。 ログスケールの場合、デフォルトは [1, 2, 5] です。

タイプ: 1 ~ 10(10 は含まない)。
デフォルト: 計算
vAxis.gridlines.minSpacing

hAxis メジャーのグリッド線間の最小画面スペース(ピクセル単位)です。主要なグリッド線のデフォルトは、線形目盛の場合は 40、対数目盛の場合は 20 です。minSpacing ではなく count を指定すると、minSpacing がカウントから計算されます。逆に、count ではなく minSpacing を指定した場合、カウントは minSpacing から計算されます。両方を指定すると、minSpacing がオーバーライドされます。

タイプ: 数値
デフォルト: 計算
vAxis.gridlines.multiple

グリッド線と目盛りの値は、このオプションの値の倍数にする必要があります。間隔とは異なり、倍数の 10 倍は考慮されません。gridlines.multiple = 1 を指定してティックを整数に強制することも、gridlines.multiple = 1000 を指定してティックを 1, 000 の倍数にすることもできます。

タイプ: 数値
デフォルト: 1
vAxis.gridlines.units

グラフで計算されたグリッド線を使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

詳細については、日付と時刻をご覧ください。

タイプ: オブジェクト
デフォルト: null
vAxis.minorGridlines

メンバーが垂直方向のマイナー グリッド線を構成するオブジェクト(vAxis.gridlines オプションと同様)。

タイプ: オブジェクト
デフォルト: null
vAxis.minorGridlines.color

グラフ領域内の縦方向のマイナー グリッド線の色。有効な HTML 色の文字列を指定します。

型: string
デフォルト: グリッド線と背景色のブレンド
vAxis.minorGridlines.count

マイナー Gridlines.count オプションはほとんど非推奨です。ただし、カウントを 0 に設定してマイナーグリッドラインを無効にする場合を除きます。マイナー グリッド線の数は、主要グリッド線(vAxis.gridlines.interval を参照)と最小要件スペース(vAxis.minorGridlines.minSpacing を参照)の間隔によって異なります。

タイプ: 数値
デフォルト: 1
vAxis.minorGridlines.interval

マイナー Gridlines.interval オプションは、主要なグリッドライン間隔オプションに似ていますが、選択される間隔は常に、主要なグリッド線間隔の偶数です。線形目盛のデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数目盛の間隔は [1, 2, 5] です。

タイプ: 数値
デフォルト: 1
vAxis.minorGridlines.minSpacing

隣接するマイナー グリッド線、マイナー グリッド、メジャー グリッド間の最小スペース(ピクセル単位)。デフォルト値は、線形目盛の主要なグリッド線の minSpacing の 1/2、ログスケールの minSpacing の 1/5 です。

タイプ: 数値
デフォルト: computed
vAxis.minorGridlines.multiple

メジャー gridlines.multiple の場合と同じです。

タイプ: 数値
デフォルト: 1
vAxis.minorGridlines.units

グラフの計算のマイナー グリッドラインで使用する場合、日付/日時/時刻のデータ型のさまざまな側面のデフォルトの形式をオーバーライドします。年、月、日、時間、分、秒、ミリ秒の形式を指定できます。

一般的な形式は次のとおりです。

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

詳細については、日付と時刻をご覧ください。

タイプ: オブジェクト
デフォルト: null
vAxis.logScale

true の場合、縦軸は対数スケールになります。注: 値はすべて正数である必要があります。

型: boolean
デフォルト: false
vAxis.scaleType

vAxis プロパティ。縦軸を対数目盛にする。次のいずれか 1 つを指定できます。

  • null - 対数目盛は実行されません。
  • 'log' - 対数目盛。負の値とゼロの値はプロットされません。このオプションは、vAxis: { logscale: true } を設定する場合と同じです。
  • 'mirrorLog' - 負の値をゼロにプロットする対数スケーリング。プロットされた負の数値は、絶対値の対数の負数です。0 に近い値は線形スケールでプロットされます。

このオプションは continuous 軸でのみサポートされています。

型: string
デフォルト: null
vAxis.textPosition

グラフの軸を基準とした垂直軸のテキストの位置。サポートされている値: out、in、none。

型: string
デフォルト: 'out'
vAxis.textStyle

縦軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

自動生成された Y 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値(数値、日付、日時、時刻など)またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の v プロパティと、ラベルとして表示されるリテラル文字列を含むオプションの f プロパティが必要です。

オーバーライドする viewWindow.min または viewWindow.max を指定しない限り、viewWindow は自動的に最小ティックと最大ティックを含むように拡張されます。

例:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
型: 要素の配列
デフォルト: 自動
vAxis.title

垂直軸のタイトルを指定する vAxis プロパティ。

型: string
デフォルト: タイトルなし
vAxis.titleTextStyle

縦軸のタイトルのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color には、任意の HTML 色文字列('red''#00cc00' など)を指定できます。fontNamefontSize もご覧ください。

タイプ: オブジェクト
デフォルト: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

縦軸の最大値を指定値に移動します。これはほとんどのグラフで上方向になります。データの最大 Y 値よりも小さい値に設定されている場合は無視されます。 vAxis.viewWindow.max はこのプロパティをオーバーライドします。

タイプ: 数値
デフォルト: 自動
vAxis.minValue

縦軸の最小値を指定の値に移動します。これはほとんどのグラフで下方向になります。データの最小 y 値より大きい値に設定されている場合は無視されます。 vAxis.viewWindow.min はこのプロパティをオーバーライドします。

タイプ: 数値
デフォルト: null
vAxis.viewWindowMode

縦軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。

  • 'かなり' - 最大値と最小値がグラフ領域の下部と上部に少しレンダリングされるように垂直値を拡大縮小します。viewWindow は、数値が最も近いメジャー グリッド線、または日時が最も近いマイナー グリッド線に拡張されます。
  • 「maximized」 - 最大値と最小値がグラフ領域の上部と下部に接触するように、垂直値を調整します。これにより、vaxis.viewWindow.minvaxis.viewWindow.max は無視されます。
  • 'explicit' - グラフ領域の上と下のスケール値を指定するための、サポートが終了したオプションです。vaxis.viewWindow.minvaxis.viewWindow.max については冗長であるため、非推奨です。この値以外のデータ値はトリミングされます。表示する最大値と最小値を示す vAxis.viewWindow オブジェクトを指定する必要があります。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には vaxis.viewWindow.minvaxis.viewWindow.max が優先されます。
vAxis.viewWindow

縦軸の切り抜き範囲を指定します。

タイプ: オブジェクト
デフォルト: null
vAxis.viewWindow.max

レンダリングする垂直データの最大値。

vAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

タイプ: 数値
デフォルト: 自動
vAxis.viewWindow.min

レンダリングする垂直データの最小値。

vAxis.viewWindowMode が「を使う」または「最大化」される際には無視されます。

タイプ: 数値
デフォルト: 自動
width

グラフの幅(ピクセル単位)です。

タイプ: 数値
デフォルト: 含まれる要素の幅

メソッド

メソッド
draw(data, options)

グラフを描画します。グラフでは、ready イベントが発生した後にのみ、それ以降のメソッド呼び出しを受け取ることができます。Extended description

戻り値の型: なし
getAction(actionID)

リクエストされた actionID を含むツールチップ アクション オブジェクトを返します。

戻り値の型: オブジェクト
getBoundingBox(id)

グラフ要素 id の左、上、幅、高さを含むオブジェクトを返します。id の形式はまだ文書化されていません(これらはイベント ハンドラの戻り値です)。以下にいくつかの例を示します。

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ
cli.getBoundingBox('chartarea').height
棒グラフや縦棒グラフの最初の系列における 3 本目の棒グラフの幅
cli.getBoundingBox('bar#0#2').width
円グラフの 5 番目のウェッジの境界ボックス
cli.getBoundingBox('slice#4')
縦棒グラフ(縦棒グラフなど)のグラフデータの境界ボックス:
cli.getBoundingBox('vAxis#0#gridline')
横(棒グラフ)グラフのグラフデータの境界ボックス:
cli.getBoundingBox('hAxis#0#gridline')

値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。

戻り値の型: オブジェクト
getChartAreaBoundingBox()

グラフのコンテンツの左側、上部、幅、高さを含むオブジェクトを返します(ラベルと凡例を除く)。

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。

戻り値の型: オブジェクト
getChartLayoutInterface()

グラフの画面上の配置とその要素に関する情報を含むオブジェクトを返します。

返されたオブジェクトで次のメソッドを呼び出すことができます。

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

グラフを描画した後に呼び出します。

戻り値の型: オブジェクト
getHAxisValue(xPosition, optional_axis_index)

チャート コンテナの左端からのピクセル オフセットである xPosition の水平方向のデータ値を返します。負の値もあります。

(例: chart.getChartLayoutInterface().getHAxisValue(400))。

グラフを描画した後に呼び出します。

戻り値の型: number
getImageURI()

画像 URI としてシリアル化されたグラフを返します。

グラフを描画した後に呼び出します。

PNG グラフを印刷するをご覧ください。

戻り値の型: 文字列
getSelection()

選択したグラフ エンティティの配列を返します。選択可能なエンティティは、ローソク足、凡例のエントリ、カテゴリです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: 選択要素の配列
getVAxisValue(yPosition, optional_axis_index)

縦方向のデータ値を yPosition に返します。これは、グラフコンテナの上端からのピクセル オフセットです。負の値もあります。

(例: chart.getChartLayoutInterface().getVAxisValue(300))。

グラフを描画した後に呼び出します。

戻り値の型: number
getXLocation(dataValue, optional_axis_index)

グラフのコンテナの左端からの dataValue のピクセル x 座標を返します。

(例: chart.getChartLayoutInterface().getXLocation(400))。

グラフを描画した後に呼び出します。

戻り値の型: number
getYLocation(dataValue, optional_axis_index)

グラフのコンテナの上端からの dataValue のピクセル y 座標を返します。

(例: chart.getChartLayoutInterface().getYLocation(300))。

グラフを描画した後に呼び出します。

戻り値の型: number
removeAction(actionID)

リクエストされた actionID のツールチップ アクションをグラフから削除します。

戻り値の型: none
setAction(action)

ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。

setAction メソッドは、オブジェクトをそのアクション パラメータとして受け取ります。このオブジェクトでは 3 つのプロパティを指定する必要があります。id は設定されているアクションの ID です。text はアクションのツールチップに表示されるテキストです。action はアクション テキストをクリックしたときに実行される関数です。

グラフの draw() メソッドを呼び出す前に、すべてのツールチップ アクションを設定する必要があります。詳しい説明

戻り値の型: none
setSelection()

指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。 選択可能なエンティティは、ローソク足、凡例のエントリ、カテゴリです。 このグラフでは、一度に 1 つのエンティティしか選択できません。 Extended description

戻り値の型: なし
clearChart()

グラフをクリアし、割り当てられているすべてのリソースを解放します。

戻り値の型: なし

イベント

これらのイベントの使用方法について詳しくは、基本的なインタラクティビティイベントの処理配信イベントをご覧ください。

名前
animationfinish

遷移アニメーションが完了すると呼び出されます。

プロパティ: なし
click

ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。

プロパティ: targetID
error

グラフのレンダリング中にエラーが発生しました。

プロパティ: ID、メッセージ
legendpagination

ユーザーが凡例のページ分け矢印をクリックすると呼び出されます。現在の凡例にあるゼロベースのページ インデックスと、ページの総数を返します。

プロパティ: currentPageIndex、totalPages
onmouseover

ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。ローソクはデータテーブルのセルと関連付けられ、列の凡例のエントリ(行インデックスは null)とカテゴリと列(列インデックスは null)と関連付けられます。

プロパティ: 行、列
onmouseout

ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。ローソクはデータテーブルのセルと関連付けられ、列の凡例のエントリ(行インデックスは null)とカテゴリと列(列インデックスは null)と関連付けられます。

プロパティ: 行、列
ready

外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前に、このイベントのリスナーを設定して、イベントが発生した後にのみ呼び出す必要があります。

プロパティ: なし
select

ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、getSelection() を呼び出します。

プロパティ: なし

データポリシー

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