ヒストグラム

概要

ヒストグラムは、数値データをビンにグループ化し、ビンを分割した列として表示するグラフです。これらは、データセットの分布、つまり値が範囲内に収まる頻度を表すために使用されます。

Google Charts により、ビンの数が自動的に選択されます。すべてのビンの幅は同じで、高さはビン内のデータポイントの数に比例します。その他の点では、ヒストグラムは縦棒グラフと似ています。

こちらは、恐竜の長さのヒストグラムです。

このヒストグラムでは、最も一般的なビンが 10 m 未満であり、40 m を超える恐竜は 1 頭しかいないことがわかります。バーにカーソルを合わせると、それがセスモサウルスであることがわかります(非常に大きなディプロドクスかもしれませんが、古生物学者は不明です)。

このヒストグラムを生成するコードを以下に示します。データを(ここでは google.visualization.arrayToDataTable で)定義した後、google.visualization.Histogram を呼び出してグラフを定義し、draw メソッドで描画します。

<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([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

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

ラベル(ここでは恐竜の名前)は省略できます。その場合、ツールチップには数値のみが表示されます。

色の制御

こちらが、国の人口のヒストグラムです。

人口が 1 億人未満の国は 200 以上あり、その後は厳しいペースで減少しています。

次のヒストグラムでは、colors オプションを使用してデータを緑色で描画しています。

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

すべての Google グラフと同様に、色は英語名または 16 進数値で指定できます。

バケットの制御

デフォルトでは、Google Charts はよく知られたヒストグラム アルゴリズムを使用して、バケットサイズを自動的に選択します。ただし、上記のグラフは一例であり、これをオーバーライドすることもできます。最初のバケットに非常に多くの国があるため、他のバケットを調べるのは困難です。

このような場合、ヒストグラムでは 2 つのオプションが提供されます。アルゴリズムをオーバーライドしてバケットサイズをハードコードする histogram.bucketSizehistogram.lastBucketPercentile です。2 番目の方法では、より詳しい説明が必要です。バケットサイズの計算を変更して、指定した割合で残りの値より大きい値、または小さい値を無視します。値は引き続きヒストグラムに含まれますが、バケット化方法には影響しません。これは、外れ値を独自のバケットに入れたくない場合に便利です。外れ値は、代わりに最初または最後のバケットにグループ化されます。

上のグラフでは、バケットサイズの計算時に上位 5% と下位 5% の値を無視しています。値は引き続きグラフ化されます。変更されたのはバケットサイズのみですが、ヒストグラムが読みやすくなります。

この例では、「ミラー対数」スケールを使用するように縦軸のスケールを変更する方法も示しています。これは、値が小さいロングテールのデータをグラフ化する場合にも役立ちます。

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

ご覧のとおり、計算から上位 5% と下位 5% を削除すると、バケットサイズが 10,000,000 になります。そうでない場合のバケットサイズは 100,000,000 になります。バケットサイズが 10,000,000 であれば、望ましいことがわかっていれば、histogram.bucketSize を使用してこれを行うことができます。

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

次の例では、バケットの範囲を拡大し、さらに多数のバケットを隙間なく表示しています。maxNumBuckets オプションを使用すると、デフォルトのバケット数を増やすことができます。histogram.minValue オプションと histogram.maxValue オプションを使用するとバケットの範囲が拡張されますが、この範囲外のデータがある場合、範囲は縮小されません。

この例は、hAxis に明示的な ticks オプションを使用して、各バケットに表示する目盛りを指定できることも示しています。これはバケット自体には影響せず、目盛りの表示方法にのみ影響します。

また、視覚的なアーティファクトなしでバケット数がより正確に収まるように、chartArea.width を指定しています。この例のオプションは次のとおりです。

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

複数のシリーズ

以下は、標準モデルによる素粒子の電荷のヒストグラムです。

上のグラフには、すべての粒子を含む系列が 1 つあります。素粒子は、クォーク、レプトン、ボソンの 4 つのグループに分けられます。それぞれを別々のシリーズとして扱いましょう。

このチャートでは、4 種類の素粒子ごとに異なる系列(つまり色)を使用しています。interpolateNulls を明示的に false に設定して、null 値(系列の長さが等しくないために必要)がプロットされないようにします。また、凡例に別の行を追加するように legend.maxLines を設定します。

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

読み込んでいます

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

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

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

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

データ形式

ヒストグラム データテーブルにデータを入力するには 2 つの方法があります。シリーズが 1 つしかない場合:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...また、複数のシリーズがある場合:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

現在のところ、ヒストグラムでは省略可能な列のロールはサポートされていません。

構成オプション

名前
animation.duration

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

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

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

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

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

型: boolean
デフォルト: false
axisTitlesPosition

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

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

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

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

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

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

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

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

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

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

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

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

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

タイプ: 数値または文字列
デフォルト: auto
chartArea.top

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

タイプ: 数値または文字列
デフォルト: auto
chartArea.width

グラフ領域の幅。

タイプ: 数値または文字列
デフォルト: auto
chartArea.height

グラフ領域の高さ。

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

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

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

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

タイプ: 数値
デフォルト: 1.0
enableInteractivity

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

型: boolean
デフォルト: true
focusTarget

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

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

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

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

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

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

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

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

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

型: boolean
デフォルト: false
hAxis

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

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

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

{color: '#333', minSpacing: 20}
タイプ: オブジェクト
デフォルト: 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

行軸の主要グリッド線間の最小画面スペース(ピクセル単位)。主要なグリッド線のデフォルトは、線形スケールでは 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

グラフで計算されたグリッド線で使用する場合、日付/日時/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*/]},
  }
}
    

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

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

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

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

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

型: string
デフォルト: グリッド線と背景色の組み合わせ
hAxis.minorGridlines.count

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

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

minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数スケールのデフォルトの間隔は [1, 2, 5] です。

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

隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース(ピクセル単位)。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。

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

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

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

グラフで計算されたマイナー グリッドラインで使用される場合、日付/日時/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*/]},
  }
}
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

true の場合、横軸のテキストを斜めに描画して、より多くのテキストが軸に沿って収まるようにします。false の場合、横軸のテキストを上向きに描画します。縦向きに描画したときにテキストがすべて収まらない場合は、テキストが傾斜します。このオプションは、hAxis.textPosition が「out」(デフォルト)に設定されている場合にのみ使用できます。日付と時刻のデフォルトは false です。

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

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

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

横軸のテキストの最大レベル数。軸のテキストラベルが混雑しすぎると、サーバーはラベル同士を近づけるために隣接するラベルを上下に移動させることがあります。この値は、使用する最大レベル数を指定します。ラベルが重複せずに収まる場合、サーバーは使用するレベルを少なくできます。日付と時刻のデフォルトは 1 です。

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

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

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

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

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

表示する横軸のラベルの数。1 はすべてのラベルを表示することを意味し、2 は 1 つ以上のラベルを表示することを意味します。デフォルトでは、できる限り多くのラベルが重ならないように表示されます。

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

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

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

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

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

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

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

タイプ: 数値
デフォルト: auto
hAxis.viewWindow.min

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

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

タイプ: 数値
デフォルト: auto
histogram.bucketSize

アルゴリズムで決定するのではなく、各ヒストグラム バーのサイズをハードコードします。

タイプ: 数値
デフォルト: auto
histogram.hideBucketItems

ヒストグラムのブロック間の細い分割を省略して、一連の実線の棒にします。

型: boolean
デフォルト: false
histogram.lastBucketPercentile

ヒストグラムのバケットサイズを計算するときは、上下の lastBucketPercentile パーセントは無視されます。値は引き続きヒストグラムに含まれますが、バケット化には影響しません。

タイプ: 数値
デフォルト: 0
histogram.minValue

バケットの範囲を拡張してこの値を含めます。

タイプ: 数値
デフォルト: 自動 - 最小データ量を使用
histogram.maxValue

バケットの範囲を拡張してこの値を含めます。

タイプ: 数値
デフォルト: 自動 - データの最大値を使用
histogram.numBucketsRule

バケットのデフォルトの数を計算する方法。有効な値は次のとおりです。

  • 'sqrt' - データポイントの数の平方根を計算します。
  • 'sturges' - 二項分布から導出されます。ほぼ正規の分布を暗黙的に想定しています。
  • 'rice' - スタージスの定理の単純な代替。
詳しくは、 Wikipedia - ヒストグラム: ビンの数と幅をご覧ください。

型: string
デフォルト:'sqrt'
身長

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

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

欠点の値を推測するかどうか。true の場合、隣接するポイントに基づいて欠損データの値を推測します。false の場合、不明な位置で行内に改行を残します。

これは、isStacked: true/'percent'/'relative'/'absolute' オプションを含むグラフではサポートされていません

型: boolean
デフォルト: false
isStacked

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 にする必要があります。

タイプ: ブール値/文字列
デフォルト: false
凡例

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

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

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

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

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

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

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

凡例の最大行数。凡例に線を追加するには、1 より大きい数値に設定します。注: 実際にレンダリングされる線の数を決定するために使用される正確なロジックは、現在も随時決定されます。

現在このオプションは、legend.position が top の場合にのみ機能します。

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

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

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

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

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

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

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

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

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

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

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

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

型: boolean
デフォルト: false
シリーズ

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

  • 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'}
            
型: string
デフォルト: null
title

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

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

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

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
タイプ: オブジェクト
デフォルト: null
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 には、'red''#00cc00' などの任意の HTML カラー文字列を指定できます。fontNamefontSize もご覧ください。

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

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

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

グラフに複数の垂直軸がある場合は、個々の垂直軸のプロパティを指定します。各子オブジェクトは 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'}: 数値を 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:"#" を指定できます。ただし、この条件を満たす代替手段がない場合、グリッド線や目盛りは表示されません。

型: string
デフォルト: auto
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

行軸の主要グリッド線間の最小画面スペース(ピクセル単位)。主要なグリッド線のデフォルトは、線形スケールでは 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

グラフで計算されたグリッド線で使用する場合、日付/日時/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*/]}
  }
}
    

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

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

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

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

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

型: string
デフォルト: グリッド線と背景色の組み合わせ
vAxis.minorGridlines.count

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

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

minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は [1, 1.5, 2, 2.5, 5] で、対数スケールのデフォルトの間隔は [1, 2, 5] です。

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

隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース(ピクセル単位)。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。

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

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

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

グラフで計算されたマイナー グリッドラインで使用される場合、日付/日時/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*/]},
  }
}
    

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

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

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

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

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

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

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

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

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

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

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

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

自動生成された 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] }
型: 要素の配列
デフォルト: auto
vAxis.title

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

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

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

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

color には、'red''#00cc00' などの任意の HTML カラー文字列を指定できます。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

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

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

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

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

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

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

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

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

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

タイプ: 数値
デフォルト: auto

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

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

メソッド

メソッド
draw(data, options)

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

戻り値の型: none
getAction(actionID)

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

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

グラフ要素 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')

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

戻り値の型: オブジェクト
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 チャートの印刷をご覧ください。

戻り値の型: string
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 メソッドは、アクション パラメータとしてオブジェクトを受け取ります。このオブジェクトでは、id(設定するアクションの ID)、text(アクションのツールチップに表示するテキスト)、action(ユーザーがアクション テキストをクリックしたときに実行する関数)の 3 つのプロパティを指定する必要があります。

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

戻り値の型: none
setSelection()

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

戻り値の型: none
clearChart()

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

戻り値の型: none

イベント

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

名前
animationfinish

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

Properties(プロパティ): なし
click

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

プロパティ: targetID
error

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

プロパティ: id、message
legendpagination

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

プロパティ: currentPageIndex、totalPages
onmouseover

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

プロパティ: row、column
onmouseout

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

プロパティ: row、column
ready

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

Properties(プロパティ): なし
select

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

Properties(プロパティ): なし

データポリシー

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