概要
ヒストグラムは、数値データをビンにグループ化し、ビンをセグメント化された列として表示するグラフです。これらの値は、値が分布する頻度を示すためにデータセットの分布を表すために使用されます。
Google Chart がゴミ箱の数を自動的に選択します。すべてのビンは等しい幅で、高さはビン内のデータポイントの数に比例します。その他の点では、ヒストグラムは縦棒グラフに似ています。
例
恐竜の距離をヒストグラムで示します。
ヒストグラムでは、最も一般的なビンは 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>
ラベル(恐竜の名前)は省略できます。その場合、ツールチップには数値のみが表示されます。
色の制御
全国の人口のヒストグラムは次のとおりです。
人口は 2 億人を超え、 人口は 1 億人未満であり、その後、テールは減少しています。
このヒストグラムでは、colors
オプションを使用してデータを緑色で描画します。
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
すべての Google Chart と同様に、色は英語の名前または 16 進数の値として指定できます。
バケットの制御
デフォルトでは、Google チャートはヒストグラム用の周知のアルゴリズムを使用して、バケットサイズを自動的に選択します。ただし、これをオーバーライドしたい場合があります。上のグラフは一例です。最初のバケットに多くの国があるため、それ以外の国を調べるのは困難です。
このような状況では、ヒストグラム グラフには 2 つのオプションがあります。histogram.bucketSize
は、アルゴリズムをオーバーライドしてバケットサイズをハードコードするものです。histogram.lastBucketPercentile
です。2 番目のオプションでは、さらに説明が必要です。指定した割合で残りの値より大きい値または無視される値を無視するように、バケットサイズの計算を変更します。値はヒストグラムに含まれますが、バケットの方法には影響しません。外れ値を独自のバケットに入れたくない場合に役立ちます。代わりに、外れ値は最初のバケットまたは最後のバケットにグループ化されます。
上のグラフでは、バケットサイズを計算する際に、値の上位 5% と下位 5% を無視しました。値は引き続きグラフ化されます。変更されたのはバケットサイズだけですが、これによりヒストグラムが読みやすくなります。
また、縦軸の目盛を変更して「ミラーログ」スケールを使用するようにすることもできます。これは、ロングテールの値があるデータをグラフ化する場合にも役立ちます。
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
計算から、上端と下端の 5% まで削除すると、バケットサイズの 100,000,000 ではなく 10,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 つの原子粒子の種類ごとに異なる系列(つまり色)を使用しています。系列が等しくないため null 値がプロットされないように、interpolateNulls
を明示的に false
に設定しました。また、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
|
image.easing |
アニメーションに適用するイージング関数。以下のオプションを使用できます。
型: string
デフォルト: 「リニア」
|
Animation.startup |
初回描画時にグラフをアニメーション化するかどうかを指定します。 型: boolean
デフォルト: false
|
軸タイトルの位置 |
軸のタイトルを配置する場所(グラフ領域との比較)サポートされている値:
型: string
デフォルト: 'out'
|
backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列、たとえば タイプ: 文字列またはオブジェクト
デフォルト: '白'
|
backgroundColor.stroke |
グラフの枠線の色(HTML の色文字列)。 型: string
デフォルト: '#666'
|
backgroundColor.strokeWidth |
枠線の幅(ピクセル単位)。 タイプ: 数値
デフォルト: 0
|
backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: '白'
|
bar.groupWidth |
次のいずれかのグループで指定された棒のグループの幅。
タイプ: 数値または文字列
デフォルト: 黄金比。約 61.8%。
|
グラフ領域 |
メンバーがグラフ領域の配置とサイズを設定するためのオブジェクト(グラフ自体が描画される軸と凡例を除く)。数字と、それに続く % の 2 つの形式がサポートされています。単純な数値はピクセル単位で表される値であり、数値の後に % が続く率がパーセンテージです。例: タイプ: オブジェクト
デフォルト: null
|
ChartArea.backgroundColor |
グラフ領域の背景色。文字列を使用する場合、16 進文字列(例:「#fdc」)または英語の色名で指定してください。オブジェクトを使用する場合、以下のプロパティを指定できます。
タイプ: 文字列またはオブジェクト
デフォルト: '白'
|
ChartArea.left |
グラフの左枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
ChartArea.top |
グラフの上枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
ChartArea.width |
グラフの領域の幅。 タイプ: 数値または文字列
デフォルト: 自動
|
ChartArea.height |
グラフの領域の高さ。 タイプ: 数値または文字列
デフォルト: 自動
|
色 |
グラフの要素に使用する色。文字列の配列。各要素は HTML の色文字列です(例: 型: 文字列の配列
デフォルト: デフォルトの色
|
データの不透明度 |
データポイントの透明性。1.0 は不透明、0.0 は完全に透明です。散布図、ヒストグラム、棒グラフ、縦棒グラフでは、表示可能なデータ(散布図のドットとその他の長方形)を参照します。折れ線グラフや面グラフのように、データを選択してドットが作成されるグラフでは、カーソルを合わせたときや選択したときに円が表示されます。複合グラフは両方の動作を示しますが、このオプションは他のグラフには影響しません。(トレンドラインの不透明度を変更するには、トレンドラインの不透明度をご覧ください)。 タイプ: 数値
デフォルト: 1.0
|
enableInteractivity |
グラフでユーザーベースのイベントがスローされるか、ユーザー操作に反応するか。false の場合、グラフは「select」やその他の操作ベースのイベント(準備完了イベントやエラーイベントをスローしません)をスローせず、ユーザー入力に応じてホバーテキストを表示するなど、変化しません。 型: boolean
デフォルト: true
|
focusTarget |
マウスオーバーでフォーカスを受け取るエンティティのタイプ。マウスクリックで選択されるエンティティや、イベントに関連付けられるデータテーブル要素にも影響します。値は次のいずれかになります。
focusTarget 'category' では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる時系列の値を比較する際に役立ちます。 型: string
デフォルト: 'datum'
|
fontSize |
グラフ内のすべてのテキストのデフォルトのフォントサイズ(ピクセル単位)です。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 タイプ: 数値
デフォルト: 自動
|
フォント名 |
グラフ内のすべてのテキストのデフォルトのフォント フェイス。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 型: string
デフォルト: 「Arial」
|
forceIFrame |
インライン フレーム内にグラフを描画します。(IE8 では、このオプションは無視されます。すべての IE8 チャートは i-frame で描画されます)。 型: boolean
デフォルト: false
|
軸 |
メンバーがさまざまな横軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 { title: 'Hello', titleTextStyle: { color: '#FF0000' } } タイプ: オブジェクト
デフォルト: null
|
hAxis.gridlines |
横軸のグリッド線を構成するプロパティを持つオブジェクト。 横軸のグリッド線は縦に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {color: '#333', minSpacing: 20} タイプ: オブジェクト
デフォルト: null
|
hAxis.gridlines.color |
グラフ領域内の水平グリッド線の色有効な HTML 色の文字列を指定します。 型: string
デフォルト: '#CCC'
|
hAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
hAxis.gridlines.interval |
隣接するグリッド線間のサイズ(ピクセルではないデータ値)。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される タイプ: 1 ~ 10(10 は含まない)。
デフォルト: 計算
|
hAxis.gridlines.minSpacing |
hAxis メジャーのグリッド線間の最小画面スペース(ピクセル単位)です。主要なグリッド線のデフォルトは、線形目盛の場合は タイプ: 数値
デフォルト: 計算
|
hAxis.gridlines.multiple |
グリッド線と目盛りの値は、このオプションの値の倍数にする必要があります。間隔とは異なり、倍数の 10 倍は考慮されません。 タイプ: 数値
デフォルト: 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 オプションと同様)。 タイプ: オブジェクト
デフォルト: null
|
hAxis.minorGridlines.color |
グラフ領域の横並びのマイナー グリッド線の色。有効な HTML 色の文字列を指定します。 型: string
デフォルト: グリッド線と背景色のブレンド
|
hAxis.minorGridlines.count |
タイプ: 数値
デフォルト: 1
|
hAxis.minorGridlines.interval |
マイナー Gridlines.interval オプションは、主要なグリッドライン間隔オプションに似ていますが、選択される間隔は常に、主要なグリッド線間隔の偶数です。線形目盛のデフォルトの間隔は タイプ: 数値
デフォルト: 1
|
hAxis.minorGridlines.minSpacing |
隣接するマイナー グリッド線、マイナー グリッド、メジャー グリッド間の最小スペース(ピクセル単位)。デフォルト値は、線形目盛の主要なグリッド線の minSpacing の 1/2、ログスケールの minSpacing の 1/5 です。 タイプ: 数値
デフォルト: computed
|
hAxis.minorGridlines.multiple |
メジャー タイプ: 数値
デフォルト: 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.textPosition |
グラフの領域に対する水平軸のテキストの位置。サポートされている値: out、in、none。 型: string
デフォルト: 'out'
|
hAxis.textStyle |
横軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.title |
型: string
デフォルト: null
|
hAxis.titleTextStyle |
横軸のタイトル テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
false の場合、グラフのコンテナによって切り抜きが行われるのではなく、最も外側のラベルが非表示になります。true の場合、ラベルの切り抜きが許可されます。 型: boolean
デフォルト: false
|
hAxis.slantedText |
true の場合は、軸に沿ってテキストをテキストを斜めに描画します。その軸に沿ってテキストをさらに表示する場合は false を指定します。false の場合は、テキストを横向きにします。デフォルトの動作では、まっすぐに描画してもテキストの一部が収まらない場合は、そのテキストを傾けます。このオプションは、 型: boolean
デフォルト: 自動
|
hAxis.slantedTextAngle |
水平軸のテキストの角度(傾斜で描画された場合)。 タイプ: 数値、-90 ~ 90
デフォルト: 30
|
hAxis.maxAlternation |
横軸のテキストの最大レベル数。軸のテキストラベルが密集しすぎると、サーバーは、ラベルを密結合するために、隣接するラベルを上下にシフトする可能性があります。この値は、使用するレベルの最大数を指定します。ラベルが重ならないようにする場合、サーバーはより少ないレベルを使用できます。日付と時刻のデフォルトは 1 です。 タイプ: 数値
デフォルト: 2
|
hAxis.maxTextLine |
テキストラベルで使用できる最大行数。ラベルが長すぎる場合、複数行にまたがることがあります。また、デフォルトで行数は使用可能なスペースの高さによって制限されます。 タイプ: 数値
デフォルト: 自動
|
hAxis.minTextSpacing |
隣接する 2 つのテキストラベル間の最小水平方向の間隔(ピクセル単位)。ラベルの密度が高すぎる場合や間隔が長すぎると、間隔がこのしきい値を下回ることがあります。この場合、ラベルの整理されていないメジャーのいずれかが適用されます(ラベルの切り詰めや一部のラベルの削除など)。 タイプ: 数値
デフォルト:
hAxis.textStyle.fontSize の値 |
hAxis.showTextEvery |
表示する横軸のラベルの数。1 はすべてのラベル、2 は他のすべてのラベルを表します。デフォルトでは、できる限り多くのラベルを重複なしで表示しようとします。 タイプ: 数値
デフォルト: 自動
|
hAxis.viewWindowMode |
横軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には
haxis.viewWindow.min と haxis.viewWindow.max が優先されます。 |
hAxis.viewWindow |
横軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
hAxis.viewWindow.max |
トリミング ウィンドウが終了するまでのゼロベースの行インデックス。このインデックス以上のデータポイントがトリミングされます。
タイプ: 数値
デフォルト: 自動
|
hAxis.viewWindow.min |
トリミング ウィンドウの開始位置を示す 0 から始まる行インデックス。これより小さいインデックスのデータポイントはトリミングされます。
タイプ: 数値
デフォルト: 自動
|
ヒストグラム.バケットサイズ |
アルゴリズムに基づいて決定するのではなく、各ヒストグラム バーのサイズをハードコードします。 タイプ: 数値
デフォルト: 自動
|
ヒストグラム.hideBucketItems |
ヒストグラムのブロック間の細い分割は省略して、一連の実線のバーにします。 型: boolean
デフォルト: false
|
ヒストグラム.lastBucketPercentile |
ヒストグラムのバケットサイズを計算するときは、上下の タイプ: 数値
デフォルト: 0
|
latitude.minValue |
バケットの範囲を拡大して、この値を含めます。 タイプ: 数値
デフォルト: 自動 - 最小データ使用量を使用
|
latitude.maxValue |
バケットの範囲を拡大して、この値を含めます。 タイプ: 数値
デフォルト: 自動 - データの最大値を使用
|
ヒストグラム.numBucketsRule |
デフォルトのバケット数を計算する方法有効な値は次のとおりです。
型: string
デフォルト:
'sqrt' |
高さ |
グラフの高さ(ピクセル単位)。 タイプ: 数値
デフォルト: 要素を格納する高さ
|
interpolateNulls |
欠落しているポイントの値を推測するかどうかを指定します。true の場合、隣接する点に基づいて欠損データの値を推測します。false の場合、不明なポイントで改行が挿入されます。
これは、 型: boolean
デフォルト: false
|
isStacked |
true に設定すると、各ドメイン値ですべての系列の要素がスタックされます。 注: 縦棒グラフ、面グラフ、SteppedArea グラフでは、系列要素の順序が重なるように、凡例項目の順序が逆になっています(例: 系列 0 は最下位の凡例項目になります)。このことは、棒グラフには該当しません。
100% 積み上げの場合、各要素の計算値は、実際の値の後にツールチップに表示されます。
デフォルトでは、ターゲットの軸は 0 ~ 1 のスケールに基づいて 1 ~
100% のスタッキングは 型: boolean/string
デフォルト: false
|
凡例 |
メンバーがさまざまな要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}} タイプ: オブジェクト
デフォルト: null
|
凡例.alignment |
凡例の配置。次のいずれか 1 つを指定できます。
凡例の中心の開始、中央、終了は、スタイル(垂直または水平)を基準とします。たとえば、「右」の凡例では「開始」と「終了」がそれぞれ上部と下部に存在します。「上部」の凡例の場合、「開始」と「終了」はそれぞれ領域の左側と右側になります。 デフォルト値は、凡例の位置によって異なります。「凡例」のデフォルトは、デフォルトは「センター」、その他の凡例は「開始」です。 型: string
デフォルト: 自動
|
凡例.maxLines |
凡例の最大行数。複数の行に設定すると、凡例に行が追加されます。注: レンダリングされる実際の行数を判断するために使用される正確なロジックは、まだ可変です。 現在、このオプションは凡例.position が「top」の場合にのみ動作します。 タイプ: 数値
デフォルト: 1
|
凡例.pageIndex |
凡例で最初に選択した 0 から始まるページ インデックス。 タイプ: 数値
デフォルト: 0
|
凡例.position |
凡例の位置。次のいずれか 1 つを指定できます。
型: string
デフォルト: 「right」
|
凡例テキストスタイル |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ページの向き |
グラフの向き。 型: string
デフォルト: 'horizontal'
|
ReverseCategories |
true に設定すると、右から左に時系列が描画されます。デフォルトでは、左から右に描画します。 型: boolean
デフォルト: false
|
series |
オブジェクトの配列。グラフ内の対応する系列の形式を記述します。系列のデフォルト値を使用するには、空のオブジェクト {} を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートします。
オブジェクトの配列を指定できます(配列は指定された順序で時系列に適用されます)。また、それぞれの子に、適用する時系列を示す数値キーが含まれるオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同一で、最初のシリーズは凡例で黒色で存在し、4 つ目のシリーズは凡例で赤色で存在し、存在しない場合は宣言します。 series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } 型: オブジェクトの配列、またはネストされたオブジェクトを含むオブジェクト
デフォルト: {}
|
テーマ |
テーマとは、特定のグラフの動作や視覚効果を実現するために連携する一連の事前定義オプション値です。現在選択できるテーマは 1 つのみです。
型: string
デフォルト: null
|
title |
グラフの上に表示するテキスト。 型: string
デフォルト: タイトルなし
|
titlePosition |
グラフのタイトルを配置する場所(グラフ領域との比較)サポートされている値:
型: string
デフォルト: 'out'
|
titleTextStyle |
タイトル テキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{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 の場合、ツールチップ内のシリーズ情報の横に色付きの正方形が表示されます。 型: boolean
デフォルト: 自動
|
tooltip.textStyle |
ツールチップのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
ツールチップが表示されるユーザー操作:
型: string
デフォルト: 「focus」
|
vAx |
グラフに複数の縦軸がある場合、個々の縦軸のプロパティを指定します。
各子オブジェクトは
複数の縦軸のグラフを指定するには、 { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
このプロパティは、オブジェクトまたは配列のいずれかです。オブジェクトはオブジェクトの集合であり、各オブジェクトには、定義した軸を指定する数値ラベルがあります。これは上記の形式です。配列は、軸ごとに 1 つずつオブジェクトの配列です。たとえば、次の配列スタイルの表記は、上記の vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] 型: オブジェクトの配列、または子オブジェクトを含むオブジェクト
デフォルト: null
|
vAxis |
メンバーがさまざまな垂直軸の要素を構成するオブジェクト。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {title: 'Hello', titleTextStyle: {color: '#FF0000'}} タイプ: オブジェクト
デフォルト: null
|
vAxis.baseline |
タイプ: 数値
デフォルト: 自動
|
vAxis.baselineColor |
縦軸のベースラインの色を指定します。任意の HTML 色文字列(例: タイプ: 数値
デフォルト: 'black'
|
vAxis.direction |
縦軸の値の増加方向。デフォルトでは、低い値はグラフの下部に表示されます。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
vAxis.format |
数値軸ラベルの形式文字列。これは、ICU パターンセットのサブセットです。たとえば
ラベルに適用される実際の形式は、API の読み込み先のロケールから取得されます。詳細については、特定のロケールでのグラフの読み込みをご覧ください。
ティック値とグリッド線を計算する際に、関連するすべてのグリッドライン オプションの複数の組み合わせが考慮され、書式設定されたティックラベルが重複する場合、または重複する場合は代替が拒否されます。整数のティック値のみを表示する場合は 型: string
デフォルト: 自動
|
vAxis.gridlines |
メンバーが縦軸にグリッド線を設定するオブジェクト。 縦軸のグリッド線は横方向に描画されます。このオブジェクトのプロパティを指定するには、次に示すように、オブジェクト リテラル表記を使用します。 {color: '#333', minSpacing: 20} タイプ: オブジェクト
デフォルト: null
|
vAxis.gridlines.color |
グラフ領域内の垂直グリッド線の色有効な HTML 色の文字列を指定します。 型: string
デフォルト: '#CCC'
|
vAxis.gridlines.count |
グラフ領域内の水平グリッド線のおおよその数。
タイプ: 数値
デフォルト: -1
|
vAxis.gridlines.interval |
隣接するグリッド線間のサイズ(ピクセルではないデータ値)。現時点では、このオプションは数値軸専用ですが、日付と時刻にのみ使用される タイプ: 1 ~ 10(10 は含まない)。
デフォルト: 計算
|
vAxis.gridlines.minSpacing |
hAxis メジャーのグリッド線間の最小画面スペース(ピクセル単位)です。主要なグリッド線のデフォルトは、線形目盛の場合は タイプ: 数値
デフォルト: 計算
|
vAxis.gridlines.multiple |
グリッド線と目盛りの値は、このオプションの値の倍数にする必要があります。間隔とは異なり、倍数の 10 倍は考慮されません。 タイプ: 数値
デフォルト: 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
|
vAxis.minorGridlines.minSpacing |
隣接するマイナー グリッド線、マイナー グリッド、メジャー グリッド間の最小スペース(ピクセル単位)。デフォルト値は、線形目盛の主要なグリッド線の minSpacing の 1/2、ログスケールの minSpacing の 1/5 です。 タイプ: 数値
デフォルト: computed
|
vAxis.minorGridlines.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 |
型: string
デフォルト: null
|
vAxis.textPosition |
グラフの軸を基準とした垂直軸のテキストの位置。サポートされている値: out、in、none。 型: string
デフォルト: 'out'
|
vAxis.textStyle |
縦軸のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
自動生成された Y 軸の目盛を、指定した配列に置換します。配列の各要素は、有効なティック値(数値、日付、日時、時刻など)またはオブジェクトのいずれかである必要があります。オブジェクトの場合は、ティック値用の
オーバーライドする 例:
型: 要素の配列
デフォルト: 自動
|
vAxis.title |
垂直軸のタイトルを指定する 型: string
デフォルト: タイトルなし
|
vAxis.titleTextStyle |
縦軸のタイトルのテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
タイプ: オブジェクト
デフォルト:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
縦軸の最大値を指定値に移動します。これはほとんどのグラフで上方向になります。データの最大 Y 値よりも小さい値に設定されている場合は無視されます。
タイプ: 数値
デフォルト: 自動
|
vAxis.minValue |
縦軸の最小値を指定の値に移動します。これはほとんどのグラフで下方向になります。データの最小 y 値より大きい値に設定されている場合は無視されます。
タイプ: 数値
デフォルト: null
|
vAxis.viewWindowMode |
縦軸をスケーリングしてグラフ領域内の値をレンダリングする方法を指定します。次の文字列値がサポートされます。
型: string
デフォルト: 「tyly」と同じですが、使用される場合には
vaxis.viewWindow.min と vaxis.viewWindow.max が優先されます。 |
vAxis.viewWindow |
縦軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
vAxis.viewWindow.max |
レンダリングする垂直データの最大値。
タイプ: 数値
デフォルト: 自動
|
vAxis.viewWindow.min |
レンダリングする垂直データの最小値。
タイプ: 数値
デフォルト: 自動
|
width |
グラフの幅(ピクセル単位)です。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
メソッド | |
---|---|
draw(data, options) |
グラフを描画します。グラフでは、 戻り値の型: なし
|
getAction(actionID) |
リクエストされた 戻り値の型: オブジェクト
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getChartAreaBoundingBox() |
グラフのコンテンツの左側、上部、幅、高さを含むオブジェクトを返します(ラベルと凡例を除く)。
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getChartLayoutInterface() |
グラフの画面上の配置とその要素に関する情報を含むオブジェクトを返します。 返されたオブジェクトで次のメソッドを呼び出すことができます。
グラフを描画した後に呼び出します。 戻り値の型: オブジェクト
|
getHAxisValue(xPosition, optional_axis_index) |
チャート コンテナの左端からのピクセル オフセットである (例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getImageURI() |
画像 URI としてシリアル化されたグラフを返します。 グラフを描画した後に呼び出します。 PNG グラフを印刷するをご覧ください。 戻り値の型: 文字列
|
getSelection() |
選択したグラフ エンティティの配列を返します。選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
getVAxisValue(yPosition, optional_axis_index) |
縦方向のデータ値を (例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getXLocation(dataValue, optional_axis_index) |
グラフのコンテナの左端からの (例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getYLocation(dataValue, optional_axis_index) |
グラフのコンテナの上端からの (例: グラフを描画した後に呼び出します。 戻り値の型: number
|
removeAction(actionID) |
リクエストされた 戻り値の型:
none |
setAction(action) |
ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。
グラフの 戻り値の型:
none |
setSelection() |
指定されたグラフのエンティティを選択します。前の選択内容をすべてキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: なし
|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、配信イベントをご覧ください。
名前 | |
---|---|
animationfinish |
遷移アニメーションが完了すると呼び出されます。 プロパティ: なし
|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
legendpagination |
ユーザーが凡例のページ分け矢印をクリックすると呼び出されます。現在の凡例にあるゼロベースのページ インデックスと、ページの総数を返します。 プロパティ: currentPageIndex、totalPages
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。棒グラフは、データテーブルのセル、凡例の列のエントリ(行インデックスは null)、カテゴリ(行インデックスは null)にそれぞれ関連付けられます。 プロパティ: 行、列
|
onmouseout |
ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。棒グラフは、データテーブルのセル、凡例の列のエントリ(行インデックスは null)、カテゴリ(行インデックスは null)にそれぞれ関連付けられます。 プロパティ: 行、列
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、 プロパティ: なし
|
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、 プロパティ: なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。