棒グラフ

アニメーションの再生時間（ミリ秒単位）。詳細については、アニメーションのドキュメントをご覧ください。

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

• 「linear」 - 一定速度。
• 「in」- イーズイン - ゆっくりと始めてスピードアップします。
• 「out」- イーズアウト - すばやく起動し、速度を下げます。
• 「inAndOut」- イーズインとイーズアウト - ゆっくりとスタートし、速く、ゆっくりと。

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

棒グラフと 縦棒グラフで、true に設定すると、注釈はすべて横棒グラフの外側に描画されます。

アノテーションをサポートするグラフの場合、annotations.boxStyle オブジェクトによって、アノテーションを囲むボックスの外観が制御されます。

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    

このオプションは現在、面グラフ、横棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。アノテーション チャートではサポートされていません。

var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    

このオプションは現在、面グラフ、横棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。 アノテーション チャート ではサポートされていません。

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

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

グラフのメイン領域の背景色。単純な HTML カラー文字列（'red'、'#00cc00' など）か、次のプロパティを持つオブジェクトを指定できます。

グラフの枠線の色。HTML のカラー文字列で指定します。

枠線の幅（ピクセル単位）。

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

• ピクセル数（例: 50）。
• 各グループで使用可能な幅の割合（例: 「20%」）。「100%」はグループ間にスペースがないことを意味します。

マテリアル棒グラフのバーが垂直か水平か。このオプションは、従来の棒グラフと従来の縦棒グラフには影響しません。

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

• stroke: 色。16 進数文字列または英語の色名で指定します。
• strokeWidth: 指定すると、指定した幅（stroke の色）でグラフ領域の周囲に枠線が描画されます。

左の枠線からグラフを描画する距離。

上枠線からグラフを描画する距離。

グラフ領域の幅。

グラフ領域の高さ。

マテリアル グラフの場合、このオプションではサブタイトルを指定します。字幕に対応しているのはマテリアル チャートのみです。

マテリアル グラフの場合、このオプションではタイトルを指定します。

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

データポイントの透明度。1.0 は完全に不透明、0.0 は完全透明です。散布図、ヒストグラム、棒グラフ、縦棒グラフでは、表示されるデータのことを指し、散布図では点が表示され、それ以外は長方形になります。折れ線グラフや面グラフなど、データの選択によって点が表示されるグラフでは、カーソルを合わせるか選択したときに表示される円を指します。複合グラフは両方の動作を示します。このオプションは他のグラフには影響しません。（トレンドラインの不透明度を変更するには、 トレンドラインの不透明度 をご覧ください）。

グラフがユーザーベースのイベントをスローするか、ユーザー操作に反応するかを示します。false の場合、グラフは「select」などのインタラクション ベースのイベントをスローしません（ただし、Ready イベントや error イベントはスローされます）。また、ホバーテキストを表示したり、ユーザー入力に応じて変化したりしません。

explorer オプションを使用すると、Google グラフのパンとズームを行えます。explorer: {} は、デフォルトのエクスプローラ動作を提供し、ユーザーはドラッグによって水平および垂直にパンしたり、スクロールによってズームイン / ズームアウトしたりできます。

この機能は試験運用版であり、今後のリリースで変更される可能性があります。

注: エクスプローラでは、連続した軸（数値や日付など）しか使用できません。

Google グラフ エクスプローラでは、次の 3 つの操作がサポートされています。

• dragToPan: ドラッグしてグラフを水平方向や垂直方向にパンします。水平軸に沿ってのみパンするには、explorer: { axis: 'horizontal' } を使用します。縦軸についても同様です。
• dragToZoom: エクスプローラのデフォルトの動作では、ユーザーがスクロールするとズームインとズームアウトが行われます。explorer: { actions: ['dragToZoom', 'rightClickToReset'] } を使用すると、長方形の領域をドラッグすると、その領域にズームインされます。dragToZoom を使用する場合は、必ず rightClickToReset を使用することをおすすめします。ズームのカスタマイズについては、explorer.maxZoomIn、explorer.maxZoomOut、explorer.zoomDelta をご覧ください。
• rightClickToReset: グラフを右クリックすると、元のパンレベルとズームレベルに戻ります。

デフォルトでは、explorer オプションを使用すると、ユーザーは水平方向と垂直方向の両方にパンできます。ユーザーが水平方向にのみパンする場合は、explorer: { axis: 'horizontal' } を使用します。同様に、explorer: { axis: 'vertical' } は垂直方向のみのパンを有効にします。

デフォルトでは、データの場所に関係なく、ユーザーは全体をパンできます。ユーザーが元のグラフを超えてパンしないようにするには、explorer: { keepInBounds: true } を使用します。

エクスプローラーがズームインできる最大値です。デフォルトでは、元のビューの 25% のみが表示されるようにズームインできます。explorer: { maxZoomIn: .5 } と設定すると、元のビューの半分までしかズームインできなくなります。

エクスプローラーがズームアウトできる最大値です。デフォルトでは、グラフが利用可能なスペースの 4 分の 1 を占める程度にズームアウトできます。explorer: { maxZoomOut: 8 } を設定すると、ユーザーはグラフが利用可能なスペースの 1/8 しか占有されない程度にズームアウトできるようになります。

ユーザーがズームインまたはズームアウトするときに、explorer.zoomDelta が拡大の度合いを決定します。数値が小さいほど、ズームが滑らかになり、速度が遅くなります。

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

• 'datum' - 単一のデータポイントに焦点を当てます。データテーブルのセルに関連付けられます。
• 「category」- 主軸に沿ってすべてのデータポイントをグループ化します。データテーブルの行に関連付けられます。

focusTarget の「category」では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる系列の値を比較する場合に便利です。

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

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

インライン フレーム内にグラフを描画します。（IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます）。

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

複数の横軸を持つグラフを指定するには、まず series.targetAxisIndex を使用して新しい軸を定義し、次に hAxes を使用して軸を構成します。次の例では、系列 1 を下軸に割り当て、そのカスタム タイトルとテキスト スタイルを指定しています。

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

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

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
    

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

横軸のベースライン。

横軸のベースラインの色。任意の HTML カラー文字列（例: 'red'、'#00cc00'）。

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

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

• {format: 'none'}: 書式なしの数値を表示します（例:8000000）
• {format: 'decimal'}: 数値を 3 桁ごとの区切り記号で表示します（例: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:"#" を指定できます。ただし、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

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

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

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

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

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

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

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*/]},
  }
}
    

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

hAxis.gridlines オプションと同様に、横軸の副グリッド線を設定するメンバーを持つオブジェクト。

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

カウントを 0 に設定してマイナー グリッドラインを無効にする場合を除き、minorGridlines.count オプションはほぼ非推奨となりました。マイナー グリッド線の数は、メジャー グリッド線の間隔（hAxis.gridlines.interval を参照）と必要最小限のスペース（hAxis.minorGridlines.minSpacing を参照）に依存するようになりました。

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

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

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*/]},
  }
}
    

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

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

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

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

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

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

自動生成された X 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、timeofday など）またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の 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] }

横軸のタイトルを指定する hAxis プロパティ。

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

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

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

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

• 「pretty」 - データの最大値と最小値がグラフ領域の左右の少し内側にレンダリングされるように水平方向の値をスケーリングします。viewWindow は、数値の場合は最も近い主要グリッド線、日時の場合は最も近い主要グリッド線に展開されます。
• 「maximized」 - データの最大値と最小値がグラフ領域の左右に接触するように水平方向の値をスケーリングします。これにより、haxis.viewWindow.min と haxis.viewWindow.max が無視されます。
• 「⚈」 - グラフ領域の左右のスケール値を指定するオプション（非推奨）。（haxis.viewWindow.min および haxis.viewWindow.max と冗長なため非推奨）。これらの値以外のデータ値は切り抜かれます。表示する最大値と最小値を記述する hAxis.viewWindow オブジェクトを指定する必要があります。

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

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

hAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

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

hAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

グラフの高さ（ピクセル単位）。

true に設定した場合、各ドメイン値ですべてのシリーズの要素がスタックされます。注: 列グラフ、エリアグラフ、SteppedArea グラフでは、Google Charts では、系列要素のスタックに合わせて凡例の項目の順序が逆になっています（たとえば、系列 0 は最下端の凡例項目になります）。これは、棒グラフには 適用されません 。

isStacked オプションは 100% のスタッキングもサポートしており、各ドメイン値の要素のスタックは再スケーリングされて合計が 100% になります。

isStacked のオプションは次のとおりです。

• false - 要素はスタックされません。これがデフォルトのオプションです。
• true - 各ドメイン値ですべてのシリーズの要素をスタックします。
• 'percent' - すべての系列の要素を各ドメイン値でスタックし、合計が 100% になるように再スケーリングします。各要素の値は 100% のパーセンテージとして計算されます。
• 'relative' - すべての系列の要素を各ドメイン値でスタックし、合計が 1 になるように再スケーリングします。各要素の値は 1 の小数として計算されます。
• 'absolute' - isStacked: true と同じように機能します。

100% スタッキングの場合、各要素の計算値は、ツールチップ内の実際の値の後に表示されます。

ターゲット軸はデフォルトで、相対値 0 ～ 1 のスケールに基づく目盛り値が 'relative' の場合は 1 の小数、'percent' の場合は 0 ～ 100% に設定されます（注: 'percent' オプションを使用する場合、軸/目盛りの値は割合で表示されますが、実際の値は相対的な 0 ～ 1 のスケール値です。これは、パーセンテージ軸の目盛りが、相対的な 0 ～ 1 のスケール値に「#.##%」の形式を適用した結果であるためです。isStacked: 'percent' を使用する場合は、0 ～ 1 の相対的なスケール値を使用して目盛りやグリッド線を指定してください。適切な hAxis/vAxis オプションを使用して、グリッド線や目盛りの値、書式をカスタマイズできます。

100% スタッキングは number 型のデータ値のみをサポートし、ベースラインは 0 にする必要があります。

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}

凡例の最初に選択されたゼロベースのページ インデックス。

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

• 「Bottom」 - グラフの下。
• 「left」 - グラフの左側。左の軸に関連付けられた系列がない場合。そのため、左側の凡例が必要な場合は、オプション targetAxisIndex: 1 を使用します。
• 「in」 - グラフ内の左上。
• 「none」 - 凡例は表示されません。
• 「right」 - グラフの右側vAxes オプションとは互換性がありません。
• 「top」 - グラフの上部。

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

• 「start」 - 凡例に割り当てられた領域の始点に揃えます。
• 「center」 - 凡例に割り当てられた領域の中央に配置されます。
• 「end」 - 凡例に割り当てられた領域の末端に配置されます。

開始、中央、終了は、凡例のスタイル（垂直または水平）に関連します。たとえば、「right」の凡例では「start」と「end」がそれぞれ上下に配置されます。「top」の凡例では、「start」と「end」はそれぞれ領域の左右にあります。

デフォルト値は、凡例の位置によって異なります。「ボトム」の凡例のデフォルトは「center」です。その他の凡例のデフォルトは「start」です。

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

true に設定した場合、下から上に系列が描画されます。デフォルトでは、上から下に描画されます。

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

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

• annotations - このシリーズのアノテーションに適用されるオブジェクト。これは、シリーズの textStyle などを制御するために使用できます。

  series: {
    0: {
      annotations: {
        textStyle: {fontSize: 12, color: 'red' }
      }
    }
  }
            

  カスタマイズできる項目の完全なリストについては、さまざまな annotations オプションをご覧ください。

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

オブジェクトの配列（それぞれが指定された順序でシリーズに適用される）を指定することも、それぞれの子にどのシリーズを適用するかを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同じです。1 つ目のシリーズは黒で凡例に存在しないため、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'}
          

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

グラフ領域に対するグラフのタイトルの配置場所。サポートされている値:

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

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

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

{textStyle: {color: '#FF0000'}, showColorCode: true}

true に設定すると、ツールチップの描画がグラフの上下左右の境界の外側に流れます。

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

true に設定した場合、SVG 表示ではなく HTML 表示のツールチップが使用されます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。

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

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

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

ツールチップを表示するユーザー操作:

• 「フォーカス」 - ユーザーが要素にカーソルを合わせると、ツールチップが表示されます。
• 「none」: ツールチップは表示されません。
• 「selection」- ユーザーが要素を選択するとツールチップが表示されます。

対応するグラフに トレンドライン が表示されます。デフォルトでは線形トレンドラインが使用されますが、trendlines.n.type オプションでカスタマイズできます。

トレンドラインはシリーズごとに指定されるため、ほとんどの場合、オプションは次のようになります。

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    

トレンドライン の色。英語の色名または 16 進文字列で表します。

type: 'polynomial' の トレンドライン の場合、多項式の次数（二次の場合は 2、3 次の場合は 3 など）。（Google Charts の今後のリリースでは、デフォルトの次数が 3 から 2 に変更される可能性があります）。

設定すると、 トレンドライン がこの文字列として凡例に表示されます。

トレンドライン の線幅（ピクセル単位）。

トレンドライン の透明度を 0.0（透明）～ 1.0（不透明）で指定します。

トレンドライン は、グラフ上に多数のドットを打つことで作成されます。このほとんどは必要ないオプションであり、ドットのサイズをカスタマイズできます。通常は、トレンドラインの lineWidth オプションの使用をおすすめします。ただし、グローバル pointSize オプションを使用していて、トレンドラインに異なるポイントサイズが必要な場合は、このオプションが必要になります。

トレンドライン は、グラフ上に多数のドットを付けることで作成されます。トレンドラインの pointsVisible オプションでは、特定のトレンドラインのポイントを表示するかどうかを指定します。

凡例またはトレンドラインのツールチップに 決定係数 を表示するかどうかを指定します。

トレンドライン が 'linear'（デフォルト）、'exponential'、'polynomial' のいずれであるかを示します。

トレンドライン の方程式を凡例に表示するかどうか。（トレンドラインのツールチップに表示されます）。

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

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

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

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

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

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

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

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

• {format: 'none'}: 書式なしの数値を表示します（例:8000000）
• {format: 'decimal'}: 数値を 3 桁ごとの区切り記号で表示します（例: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 軸でのみサポートされています。

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

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

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

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

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

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

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

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*/]}
  }
}
    

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

vAxis.gridlines オプションと同様に、縦軸の副グリッド線を構成するメンバーを持つオブジェクト。

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

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

minimumGridlines.count オプションは、count を 0 に設定してマイナー グリッドラインを無効にする場合を除き、ほぼ非推奨となりました。マイナー グリッド線の数は、主要グリッド線の間隔（vAxis.gridlines.interval を参照）と必要最小限のスペース（vAxis.minorGridlines.minSpacing を参照）によって異なります。

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

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

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*/]},
  }
}
    

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

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

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

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

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

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

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

自動生成された Y 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値（数値、日付、日時、timeofday など）またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の 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] }

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

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

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

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

color には、'red' や '#00cc00' などの任意の HTML カラー文字列を指定できます。fontName と fontSize もご覧ください。

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

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

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

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

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

• 「pretty」 - データの最大値と最小値がグラフ領域の下部と上部の少し内側にレンダリングされるように、垂直方向の値をスケーリングします。viewWindow は、数値の場合は最も近い主要グリッド線、日時の場合は最も近い主要グリッド線に展開されます。
• 「maximized」 - データの最大値と最小値がグラフ領域の上部と下部に接触するように、垂直方向の値をスケーリングします。これにより、vaxis.viewWindow.min と vaxis.viewWindow.max が無視されます。
• 「⚈」 - グラフ領域の上部と下部のスケール値を指定するための非推奨のオプション。（vaxis.viewWindow.min および vaxis.viewWindow.max と冗長なため非推奨。これらの値以外のデータ値は切り抜かれます。表示する最大値と最小値を記述する vAxis.viewWindow オブジェクトを指定する必要があります。

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

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

• continuous 軸の場合:

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

• discrete 軸の場合:

  切り抜きウィンドウが終了する 0 ベースの行インデックス。このインデックス以上のデータポイントは切り抜かれます。vAxis.viewWindowMode.min と組み合わせて、表示する要素のインデックスを示す半開きの範囲 [min, max) を定義します。つまり、min <= index < max のようなインデックスがすべて表示されます。

vAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

• continuous 軸の場合:

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

• discrete 軸の場合:

  切り抜きウィンドウを開始するゼロベースの行インデックス。これより低いインデックスのデータポイントは切り抜かれます。vAxis.viewWindowMode.max と組み合わせて、表示する要素のインデックスを示す半開きの範囲 [min, max) を定義します。つまり、min <= index < max のようなインデックスがすべて表示されます。vAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

vAxis.viewWindowMode が「pretty」または「maximized」の場合は無視されます。

グラフの幅（ピクセル単位）。

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

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

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

var cli = chart.getChartLayoutInterface();

グラフ領域の高さ

cli.getBoundingBox('chartarea').height

横棒グラフまたは縦棒グラフの 1 つ目の系列における 3 つ目の棒の幅

cli.getBoundingBox('bar#0#2').width

円グラフの 5 番目のくさびの境界ボックス

cli.getBoundingBox('slice#4')

縦棒グラフ（縦棒グラフなど）のグラフデータの境界ボックス:

cli.getBoundingBox('vAxis#0#gridline')

横棒グラフなど）のグラフデータの境界ボックス:

cli.getBoundingBox('hAxis#0#gridline')

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

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

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

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

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

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

グラフが描画された後に呼び出されます。

xPosition の水平データ値（グラフ コンテナの左端からのピクセル オフセット）を返します。負の値を指定できます。

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

グラフが描画された後に呼び出されます。

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

グラフが描画された後に呼び出されます。

PNG チャートの印刷をご覧ください。

選択したグラフ エンティティの配列を返します。 選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。 このグラフでは、任意の時点で選択できるエンティティは 1 つのみです。 Extended description 。

yPosition の垂直データ値（グラフ コンテナの上端からのピクセル オフセット）を返します。負の値を指定できます。

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

グラフが描画された後に呼び出されます。

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

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

グラフが描画された後に呼び出されます。

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

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

グラフが描画された後に呼び出されます。

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

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

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

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

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

チャートを消去し、割り当て済みリソースをすべて解放します。

遷移アニメーションの完了時に呼び出されます。

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

グラフのレンダリング中にエラーが発生したときに呼び出されます。

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

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

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

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

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