概要
縦棒グラフとは、ユーザーのブラウザに適した SVG または VML を使用してブラウザに表示される縦棒グラフです。すべての Google グラフと同様に、縦棒グラフではデータにカーソルを合わせるとツールチップが表示されます。このグラフの横向きバージョンについては、棒グラフをご覧ください。
例
列の色付け
4 つの貴金属の密度をグラフ化してみましょう。
上の例では、すべての色がデフォルトの青です。これらはすべて同じシリーズの一部であるため、2 つ目のシリーズがある場合は赤色になります。これらの色は、スタイルロールでカスタマイズできます。
色を選択するには 3 種類の方法があります。データテーブルには、RGB 値、英語の色名、CSS に似た宣言のすべてが示されています。
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
列のスタイル
スタイルロールを使用すると、CSS と同様の宣言で列の外観をコントロールできます。
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
グラフ内でスタイルを自由に組み合わせるのは避け、スタイルを選んでそれを使い続けることはおすすめしませんが、すべてのスタイル属性を説明するために、以下のサンプラーを以下に示します。
最初の 2 つの列は、それぞれ特定の color
を使用します(1 列目は英語名、2 列目は RGB 値です)。opacity
が選択されていないため、デフォルトの 1.0(完全に不透明)が使用されます。2 番目の列が背後のグリッド線を隠します。3 番目の列では、0.2 の opacity
が使用され、グリッド線が表示されています。4 つ目は、3 つのスタイル属性です。stroke-color
と stroke-width
で枠線を描画し、fill-color
で内側の長方形の色を指定します。右端の列ではさらに、stroke-opacity
と fill-opacity
を使用して、枠線と塗りつぶしの不透明度を選択します。
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
列のラベル付け
グラフには、目盛りラベル、凡例ラベル、ツールチップ内のラベルなど、数種類のラベルがあります。このセクションでは、縦棒グラフの列の中(または近く)にラベルを配置する方法について説明します。
たとえば、各列に適切な化学記号でアノテーションを付けるとします。そのためには、annotation ロールを使用します。
データテーブルでは、列ラベルを保持するために { role:
'annotation' }
を使用して新しい列を定義します。
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
ユーザーが列にカーソルを合わせるとデータ値を確認できますが、列自体に値を含めることもできます。
今回は、DataView
を作成して各列のアノテーションを指定するため、本来よりも少し複雑になります。
<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([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
値を異なる形式にする場合は、フォーマッタを定義して、次のような関数でラップできます。
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
次に、calc: getValueAt.bind(undefined, 1)
で呼び出すことができます。
ラベルが大きすぎて列の中に完全に収まらない場合は、ラベルが外側に表示されます。
積み上げ縦棒グラフ
積み上げ縦棒グラフは、関連する値を重ねて配置する縦棒グラフです。負の値がある場合、グラフのベースラインの下に逆の順序で積み重ねられます。通常は、カテゴリが自然にコンポーネントに分割される場合に使用します。たとえば、架空の書籍販売をジャンル別に分割し、時系列で比較するとします。
積み上げ棒グラフを作成するには、isStacked
オプションを true
に設定します。
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, };
積み上げ縦棒グラフも 100% 積み上げに対応しています。各ドメイン値の要素のスタックは、合計が 100% になるように再スケーリングされます。オプションは isStacked: 'percent'
で、各値を 100% の割合で書式設定します。isStacked: 'relative'
では、各値を 1 の小数として書式設定します。isStacked: 'absolute'
オプションもあります。これは機能的に isStacked: true
と同等です。
右側の 100% 積み上げグラフでは、目盛りの値は 0 ~ 1 の相対的なスケールに基づいて 1 の分数として示されていますが、軸の値はパーセンテージで表示されます。これは、パーセンテージ軸の目盛りが相対的な 0 ~ 1 のスケール値に「#.##%」という形式を適用した結果であるためです。isStacked: 'percent'
を使用する場合は、0 ~ 1 の相対的なスケールを使用して目盛り/軸の値を指定してください。
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
マテリアル縦棒グラフの作成
Google は 2014 年に、Google プラットフォーム上で実行される Google のプロパティとアプリ(Android アプリなど)全体で共通のデザインをサポートすることを目的としたガイドラインを発表しました。この取り組みを、マテリアル デザインと呼んでいます。Google では、すべてのコアチャートの「マテリアル」バージョンを提供します。見た目が気に入ったら、それらを使用しても構いません。
マテリアルの縦棒グラフの作成は
現在は「従来の」縦棒グラフの作成に似ていますGoogle 可視化 API を読み込み(ただし 'corechart'
パッケージではなく 'bar'
パッケージを使用します)、データテーブルを定義してから、オブジェクトを作成します(ただし、google.visualization.ColumnChart
ではなく google.charts.Bar
クラスです)。
棒グラフと縦棒グラフは基本的に同じですが、向きについては同じであるため、棒が縦棒グラフ(従来の縦棒グラフ)か横棒グラフ(棒グラフ)かにかかわらず、両方をマテリアル横棒グラフと呼びます。マテリアルでの唯一の違いは、bars
オプションです。'horizontal'
に設定すると、従来の棒グラフの向きになります。それ以外の場合、棒は垂直になります。
注: 古いバージョンの Internet Explorer では、マテリアル グラフは機能しません。(IE8 以前のバージョンは、マテリアル チャートで要求される SVG をサポートしていません)。
マテリアル縦棒グラフは、カラーパレットの改善、角の丸み、ラベルの書式設定、系列間のデフォルトの間隔の厳格化、グリッド線とタイトルの柔らかさ(および字幕の追加)など、従来の縦棒グラフと比べて多くの点が改善されています。
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;"></div> </body> </html>
マテリアル チャートはベータ版です。デザインとインタラクティビティはほぼ完成していますが、クラシック グラフで使用可能なオプションの多くはまだ利用できません。まだサポートされていないオプションの一覧については、この問題をご覧ください。
また、オプションの宣言方法は確定していないため、従来のオプションを使用している場合は、次の行をマテリアル オプションに変換する必要があります。
chart.draw(data, options);
...次の行を
chart.draw(data, google.charts.Bar.convertOptions(options));
google.charts.Bar.convertOptions()
を使用すると、hAxis/vAxis.format
プリセット オプションなどの特定の機能を利用できます。
デュアル Y グラフ
2 つの独立した Y 軸(ある系列は左の軸、別の系列は右の軸)を持つ 2 つの系列を縦棒グラフに表示できます。
2 つの Y 軸のラベル(「パース」と「見かけの大きさ」)が異なるだけでなく、それぞれに独自のスケールとグリッド線があります。この動作をカスタマイズする場合は、vAxis.gridlines
オプションを使用します。
以下のコードでは、axes
オプションと series
オプションを組み合わせてグラフの 2 つの Y 軸表示を指定しています。series
オプションは、それぞれに使用する軸を指定します('distance'
と 'brightness'
。データテーブルの列名と関係がある必要はありません)。axes
オプションを使用すると、このグラフはデュアル Y グラフになります。'distance'
軸を左側(「parsecs」というラベル)に配置し、'brightness'
軸を右に配置する(ラベル「Aspect magnitude」というラベル)します。
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
トップ X チャート
注: 上 X 軸はマテリアル チャート(つまり、bar
パッケージのチャート)でのみ使用できます。
X 軸のラベルとタイトルをグラフの下ではなく上部に配置する場合は、マテリアル グラフで axes.x
オプションを使用します。
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
読み込んでいます
google.charts.load
パッケージ名は "corechart"
です。ビジュアリゼーションのクラス名は google.visualization.ColumnChart
です。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
マテリアル縦棒グラフの場合、google.charts.load
パッケージ名は "bar"
です。(誤字ではない: マテリアル棒グラフでは両方の向きが処理されます)。ビジュアリゼーションのクラス名は google.charts.Bar
です。(誤字ではありません。マテリアル棒グラフでは両方の向きが処理されます)。
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
データ形式
表の各行は、隣接する棒のグループを表します。
行: 表の各行はバーのグループを表します。
Columns:
列 0 | 列 1 | ... | 列 N | |
---|---|---|---|---|
目的: |
|
このグループのバー 1 の値 | ... | このグループの N 個の値を示すバー |
データ型: | 数値 | ... | 数値 | |
ロール: | ドメイン | データ | ... | データ |
オプションの列ロール: | ... |
構成オプション
名前 | |
---|---|
animation.duration |
アニメーションの再生時間(ミリ秒単位)。詳細については、アニメーションのドキュメントをご覧ください。 タイプ: 数値
デフォルト: 0
|
animation.easing |
アニメーションに適用されるイージング関数。以下のオプションを使用できます。
型: string
デフォルト: 「linear」
|
animation.startup |
最初の描画でグラフをアニメーション表示するかどうかを指定します。 型: boolean
デフォルト: false
|
annotations.alwaysOutside |
棒グラフと
縦棒グラフで、 型: boolean
デフォルト: false
|
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 } } } }; このオプションは現在、面グラフ、横棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。アノテーション チャートではサポートされていません。 タイプ: オブジェクト
デフォルト: null
|
annotations.datum |
アノテーションをサポートするグラフの場合、
annotations.datum オブジェクトを使用すると、個々のデータ要素(棒グラフの各バーに表示される値など)に指定されたアノテーションの Google Charts の選択をオーバーライドできます。色は annotations.datum.stem.color 、ステムの長さは annotations.datum.stem.length 、スタイルは annotations.datum.style で制御できます。タイプ: オブジェクト
デフォルト: 色は「black」、長さは 12 文字、スタイルは「point」です。
|
annotations.domain |
アノテーションをサポートするグラフの場合、
annotations.domain オブジェクトを使用すると、ドメイン(一般的な折れ線グラフの X 軸などグラフの主軸)に指定されたアノテーションの Google Charts の選択をオーバーライドできます。色は annotations.domain.stem.color 、ステムの長さは annotations.domain.stem.length 、スタイルは annotations.domain.style で制御できます。タイプ: オブジェクト
デフォルト: 色は「黒」、長さは 5、スタイルは「point」です。
|
annotations.highContrast |
アノテーションをサポートするグラフの場合、
annotations.highContrast ブール値を使用すると、Google グラフで選択されたアノテーションの色をオーバーライドできます。デフォルトでは、annotations.highContrast が true に設定されているため、グラフはコントラストの強いアノテーションの色(暗い背景では明るい色、明るい色では暗い)が選択されます。annotations.highContrast を false に設定し、独自のアノテーション色を指定しない場合、Google グラフではアノテーションにデフォルトの系列色が使用されます。型: boolean
デフォルト: true
|
annotations.stem |
アノテーションをサポートするグラフの場合、
annotations.stem オブジェクトを使用すると、Google Chart のステムスタイル選択をオーバーライドできます。色は annotations.stem.color で制御し、ステムの長さは annotations.stem.length で制御できます。なお、ステムの長さのオプションは、スタイル 'line' のアノテーションには影響しません。'line' データム アノテーションの場合、ステムの長さは常にテキストと同じです。'line' ドメイン アノテーションの場合、ステムはチャート全体にわたってます。タイプ: オブジェクト
デフォルト: 色は「black」です。長さは、ドメイン アノテーションの場合は 5、データム アノテーションの場合は 12 です。
|
annotations.style |
アノテーションをサポートするグラフの場合、
annotations.style オプションを使用すると、Google Chart によるアノテーション タイプの選択をオーバーライドできます。'line' または 'point' のいずれかになります。型: string
デフォルト: 「point」
|
annotations.textStyle |
アノテーションをサポートするグラフの場合、
annotations.textStyle オブジェクトによってアノテーションのテキストの外観が制御されます。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 } } }; このオプションは現在、面グラフ、横棒グラフ、縦棒グラフ、複合グラフ、折れ線グラフ、散布図でサポートされています。 アノテーション チャート ではサポートされていません。 タイプ: オブジェクト
デフォルト: null
|
axisTitlesPosition |
軸のタイトルを配置する場所(グラフ領域と比較)。サポートされている値:
型: string
デフォルト: 「out」
|
backgroundColor |
グラフのメイン領域の背景色。単純な HTML カラー文字列( タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
backgroundColor.stroke |
グラフの枠線の色。HTML のカラー文字列で指定します。 型: string
デフォルト: 「#666」
|
backgroundColor.strokeWidth |
枠線の幅(ピクセル単位)。 タイプ: 数値
デフォルト: 0
|
backgroundColor.fill |
グラフの塗りつぶしの色。HTML の色文字列で指定します。 型: string
デフォルト: 「white」
|
bar.groupWidth |
バーのグループの幅。次のいずれかの形式で指定します。
タイプ: 数値または文字列
デフォルト: 黄金比(約 61.8%)
|
棒 |
マテリアル棒グラフのバーが垂直か水平か。このオプションは、従来の棒グラフと従来の縦棒グラフには影響しません。 タイプ: 「horizontal」または「vertical」
デフォルト: 「vertical」
|
chartArea |
グラフ領域(グラフ自体が描画される場所。軸と凡例を除く)の配置とサイズを構成するメンバーを持つオブジェクト。サポートされている形式は、数字、または数字の後に % が続く形式です。単純な数字はピクセル単位の値で、数字の後に % を続けるとパーセンテージになります。例: タイプ: オブジェクト
デフォルト: null
|
chartArea.backgroundColor |
グラフ領域の背景色。文字列を使用する場合は、16 進数文字列(例:「#fdc」)、英語の色の名前)を使用できます。オブジェクトを使用する場合は、次のプロパティを指定できます。
タイプ: 文字列またはオブジェクト
デフォルト: 「white」
|
chartArea.left |
左の枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
chartArea.top |
上枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: auto
|
chartArea.width |
グラフ領域の幅。 タイプ: 数値または文字列
デフォルト: auto
|
chartArea.height |
グラフ領域の高さ。 タイプ: 数値または文字列
デフォルト: auto
|
chart.subtitle |
マテリアル グラフの場合、このオプションではサブタイトルを指定します。字幕に対応しているのはマテリアル チャートのみです。 型: string
デフォルト: null
|
chart.title |
マテリアル グラフの場合、このオプションではタイトルを指定します。 型: string
デフォルト: null
|
色 |
グラフの要素に使用する色。文字列の配列。各要素は HTML カラー文字列です(例: 型: 文字列の配列
デフォルト: デフォルトの色
|
dataOpacity |
データポイントの透明度。1.0 は完全に不透明、0.0 は完全透明です。散布図、ヒストグラム、棒グラフ、縦棒グラフでは、表示されるデータのことを指し、散布図では点が表示され、それ以外は長方形になります。折れ線グラフや面グラフなど、データの選択によって点が表示されるグラフでは、カーソルを合わせるか選択したときに表示される円を指します。複合グラフは両方の動作を示します。このオプションは他のグラフには影響しません。(トレンドラインの不透明度を変更するには、 トレンドラインの不透明度 をご覧ください)。 タイプ: 数値
デフォルト: 1.0
|
enableInteractivity |
グラフがユーザーベースのイベントをスローするか、ユーザー操作に反応するかを示します。false の場合、グラフは「select」などのインタラクション ベースのイベントをスローしません(ただし、Ready イベントや error イベントはスローされます)。また、ホバーテキストを表示したり、ユーザー入力に応じて変化したりしません。 型: boolean
デフォルト: true
|
explorer |
この機能は試験運用版であり、今後のリリースで変更される可能性があります。 注: エクスプローラでは、連続した軸(数値や日付など)しか使用できません。 タイプ: オブジェクト
デフォルト: null
|
explorer.actions |
Google グラフ エクスプローラでは、次の 3 つの操作がサポートされています。
型: 文字列の配列
デフォルト: ['dragToPan', 'rightClickToReset']
|
explorer.axis |
デフォルトでは、 型: string
デフォルト: 水平方向と垂直方向の両方へのパン
|
explorer.keepInBounds |
デフォルトでは、データの場所に関係なく、ユーザーは全体をパンできます。ユーザーが元のグラフを超えてパンしないようにするには、 型: boolean
デフォルト: false
|
explorer.maxZoomIn |
エクスプローラーがズームインできる最大値です。デフォルトでは、元のビューの 25% のみが表示されるようにズームインできます。 タイプ: 数値
デフォルト: 0.25
|
explorer.maxZoomOut |
エクスプローラーがズームアウトできる最大値です。デフォルトでは、グラフが利用可能なスペースの 4 分の 1 を占める程度にズームアウトできます。 タイプ: 数値
デフォルト: 4
|
explorer.zoomDelta |
ユーザーがズームインまたはズームアウトするときに、 タイプ: 数値
デフォルト: 1.5
|
focusTarget |
マウスオーバーでフォーカスを受け取るエンティティのタイプ。マウスクリックで選択されるエンティティや、イベントに関連付けられるデータテーブル要素にも影響します。次のいずれか 1 つを指定できます。
focusTarget の「category」では、ツールチップにすべてのカテゴリ値が表示されます。これは、異なる系列の値を比較する場合に便利です。 型: string
デフォルト: 'datum'
|
fontSize |
グラフ内のすべてのテキストのデフォルトのフォントサイズ(ピクセル単位)。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 タイプ: 数値
デフォルト: 自動
|
fontName |
グラフのすべてのテキストに使用されるデフォルトのフォントです。この設定は、特定のグラフ要素のプロパティを使用してオーバーライドできます。 型: string
デフォルト: 「Arial」
|
forceIFrame |
インライン フレーム内にグラフを描画します。(IE8 ではこのオプションは無視されます。IE8 グラフはすべて i フレームに描画されます)。 型: boolean
デフォルト: false
|
hAxis |
さまざまな横軸の要素を構成するメンバーを持つオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 { title: 'Hello', titleTextStyle: { color: '#FF0000' } } タイプ: オブジェクト
デフォルト: null
|
hAxis.baseline |
横軸のベースライン。 このオプションは タイプ: 数値
デフォルト: 自動
|
hAxis.baselineColor |
横軸のベースラインの色。任意の HTML カラー文字列(例: このオプションは タイプ: 数値
デフォルト: 「black」
|
hAxis.direction |
横軸での値の増加の方向。値の順序を逆にするには、 タイプ: 1 または -1
デフォルト: 1
|
hAxis.format |
数値軸または日付軸のラベルの形式文字列。
数値軸のラベルの場合、これは小数形式の
ICU パターンセット
のサブセットです。たとえば、
日付軸のラベルの場合、これは日付形式の
ICU パターンセット
のサブセットです。たとえば、 ラベルに適用される実際の書式は、API を読み込んだ際の言語 / 地域に基づきます。詳しくは、 特定のロケールでのグラフの読み込み をご覧ください。
目盛り値とグリッド線の計算では、関連するすべてのグリッド線オプションの代替の組み合わせが検討され、フォーマットされた目盛りラベルが重複または重複する場合は、代替案は拒否されます。そのため、整数の目盛り値のみを表示する場合は
このオプションは、 型: string
デフォルト: auto
|
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.gridlines.multiple |
すべてのグリッド線と目盛りの値は、このオプションの値の倍数である必要があります。区間とは異なり、倍数の 10 倍のべき乗は考慮されません。そのため、 タイプ: 数値
デフォルト: 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 に設定してマイナー グリッドラインを無効にする場合を除き、 タイプ: 数値
デフォルト: 1
|
hAxis.minorGridlines.interval |
minimumGridlines.interval オプションはメジャー グリッドラインの間隔オプションに似ていますが、選択される間隔は常にメジャー グリッドラインの間隔の偶数になります。線形スケールのデフォルトの間隔は タイプ: 数値
デフォルト: 1
|
hAxis.minorGridlines.minSpacing |
隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース(ピクセル単位)。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。 タイプ: 数値
デフォルト: 計算済み
|
hAxis.minorGridlines.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.logScale |
このオプションは 型: boolean
デフォルト: false
|
hAxis.scaleType |
このオプションは 型: string
デフォルト: 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.ticks |
自動生成された X 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値(数値、日付、日時、timeofday など)またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の
例:
このオプションは、 型: 要素の配列
デフォルト: auto
|
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 の場合、横軸のテキストを上向きに描画します。縦向きに描画したときにテキストがすべて収まらない場合は、テキストが傾斜します。このオプションは、 型: boolean
デフォルト: 自動
|
hAxis.slantedTextAngle |
横軸のテキストが傾いて描画されている場合の角度。 タイプ: 数値、-90 ~ 90
デフォルト: 30
|
hAxis.maxAlternation |
横軸のテキストの最大レベル数。軸のテキストラベルが混雑しすぎると、サーバーはラベル同士を近づけるために隣接するラベルを上下に移動させることがあります。この値は、使用する最大レベル数を指定します。ラベルが重複せずに収まる場合、サーバーは使用するレベルを少なくできます。日付と時刻のデフォルトは 1 です。 タイプ: 数値
デフォルト: 2
|
hAxis.maxTextLines |
テキストラベルの最大行数。ラベルが長すぎる場合、複数行にまたがることがあります。行数はデフォルトで、使用可能なスペースの高さによって制限されます。 タイプ: 数値
デフォルト: auto
|
hAxis.minTextSpacing |
隣接する 2 つのテキストラベルの間に許容される水平方向の最小スペース(ピクセル単位)。ラベルの間隔が狭すぎる場合や長すぎる場合、間隔がこのしきい値を下回ることがあります。この場合、ラベルの切り捨てや一部の削除など、ラベルの整理方法のいずれかが適用されます。 タイプ: 数値
デフォルト:
hAxis.textStyle.fontSize の値 |
hAxis.showTextEvery |
表示する横軸のラベルの数。1 はすべてのラベルを表示することを意味し、2 は 1 つ以上のラベルを表示することを意味します。デフォルトでは、できる限り多くのラベルが重ならないように表示されます。 タイプ: 数値
デフォルト: 自動
|
hAxis.maxValue |
横軸の最大値を指定の値に移動します。ほとんどのグラフでは右になります。データの最大 x 値より小さい値を設定した場合は無視されます。
このオプションは、 タイプ: 数値
デフォルト: 自動
|
hAxis.minValue |
横軸の最小値を指定された値に移動します。ほとんどのグラフでは左方向になります。データの最小値 x 値より大きい値を設定した場合は無視されます。
このオプションは、 タイプ: 数値
デフォルト: 自動
|
hAxis.viewWindowMode |
グラフ領域内に値をレンダリングするために横軸をスケーリングする方法を指定します。次の文字列値がサポートされています。
このオプションは、 型: string
デフォルト: 「pretty」と同じですが、使用した場合、
haxis.viewWindow.min と haxis.viewWindow.max が優先されます。
|
hAxis.viewWindow |
横軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
hAxis.viewWindow.max |
タイプ: 数値
デフォルト: auto
|
hAxis.viewWindow.min |
タイプ: 数値
デフォルト: auto
|
身長 |
グラフの高さ(ピクセル単位)。 タイプ: 数値
デフォルト: 含まれる要素の高さ
|
isStacked |
true に設定した場合、各ドメイン値ですべてのシリーズの要素がスタックされます。注: 列グラフ、エリアグラフ、SteppedArea グラフでは、Google Charts では、系列要素のスタックに合わせて凡例の項目の順序が逆になっています(たとえば、系列 0 は最下端の凡例項目になります)。これは、棒グラフには 適用されません 。
100% スタッキングの場合、各要素の計算値は、ツールチップ内の実際の値の後に表示されます。
ターゲット軸はデフォルトで、相対値 0 ~ 1 のスケールに基づく目盛り値が
100% スタッキングは タイプ: ブール値/文字列
デフォルト: false
|
凡例 |
凡例のさまざまな要素を構成するメンバーを含むオブジェクト。このオブジェクトのプロパティを指定するには、次に示すようにオブジェクト リテラル表記を使用できます。 {position: 'top', textStyle: {color: 'blue', fontSize: 16}} タイプ: オブジェクト
デフォルト: null
|
legend.pageIndex |
凡例の最初に選択されたゼロベースのページ インデックス。 タイプ: 数値
デフォルト: 0
|
legend.position |
凡例の位置。次のいずれか 1 つを指定できます。
型: string
デフォルト: 「right」
|
legend.alignment |
凡例の配置。次のいずれか 1 つを指定できます。
開始、中央、終了は、凡例のスタイル(垂直または水平)に関連します。たとえば、「right」の凡例では「start」と「end」がそれぞれ上下に配置されます。「top」の凡例では、「start」と「end」はそれぞれ領域の左右にあります。 デフォルト値は、凡例の位置によって異なります。「ボトム」の凡例のデフォルトは「center」です。その他の凡例のデフォルトは「start」です。 型: string
デフォルト: 自動
|
legend.textStyle |
凡例のテキスト スタイルを指定するオブジェクト。オブジェクトの形式は次のとおりです。 { 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
|
シリーズ |
オブジェクトの配列で、それぞれがグラフ内の対応する系列の形式を表します。系列に対してデフォルト値を使用するには、空のオブジェクト {} を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートしています。
オブジェクトの配列(それぞれが指定された順序でシリーズに適用される)を指定することも、それぞれの子にどのシリーズを適用するかを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の 2 つの宣言は同じです。1 つ目のシリーズは黒で凡例に存在しないため、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.ignoreBounds |
注: これは HTML ツールチップにのみ適用されます。SVG ツールチップで有効にすると、グラフの境界外のオーバーフローは切り抜かれます。詳細については、ツールチップのコンテンツのカスタマイズをご覧ください。 タイプ: ブール値
デフォルト: false
|
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」
|
トレンドライン |
対応するグラフに
トレンドライン
が表示されます。デフォルトでは線形トレンドラインが使用されますが、
トレンドラインはシリーズごとに指定されるため、ほとんどの場合、オプションは次のようになります。 var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } タイプ: オブジェクト
デフォルト: null
|
trendlines.n.color |
トレンドライン の色。英語の色名または 16 進文字列で表します。 型: string
デフォルト: デフォルトのシリーズの色
|
trendlines.n.degree |
タイプ: 数値
デフォルト: 3
|
trendlines.n.labelInLegend |
設定すると、 トレンドライン がこの文字列として凡例に表示されます。 型: string
デフォルト: null
|
trendlines.n.lineWidth |
トレンドライン の線幅(ピクセル単位)。 タイプ: 数値
デフォルト: 2
|
trendlines.n.opacity |
トレンドライン の透明度を 0.0(透明)~ 1.0(不透明)で指定します。 タイプ: 数値
デフォルト: 1.0
|
trendlines.n.pointSize |
トレンドライン
は、グラフ上に多数のドットを打つことで作成されます。このほとんどは必要ないオプションであり、ドットのサイズをカスタマイズできます。通常は、トレンドラインの タイプ: 数値
デフォルト: 1
|
trendlines.n.pointsVisible |
トレンドライン
は、グラフ上に多数のドットを付けることで作成されます。トレンドラインの 型: boolean
デフォルト: true
|
trendlines.n.showR2 |
凡例またはトレンドラインのツールチップに 決定係数 を表示するかどうかを指定します。 型: boolean
デフォルト: false
|
trendlines.n.type |
トレンドライン
が 型: string
デフォルト: linear
|
trendlines.n.visibleInLegend |
トレンドライン の方程式を凡例に表示するかどうか。(トレンドラインのツールチップに表示されます)。 型: boolean
デフォルト: false
|
vAxes |
グラフに複数の垂直軸がある場合は、個々の垂直軸のプロパティを指定します。各子オブジェクトは
複数の縦軸を持つグラフを指定するには、まず { 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
デフォルト: auto
|
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 |
行軸の主要グリッド線間の最小画面スペース(ピクセル単位)。主要なグリッド線のデフォルトは、線形スケールでは タイプ: 数値
デフォルト: 計算済み
|
vAxis.gridlines.multiple |
すべてのグリッド線と目盛りの値は、このオプションの値の倍数である必要があります。区間とは異なり、倍数の 10 倍のべき乗は考慮されません。そのため、 タイプ: 数値
デフォルト: 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
|
vAxis.minorGridlines.minSpacing |
隣接するマイナー グリッド線間、およびマイナー グリッドラインとメジャー グリッドラインとの間に必要な最小スペース(ピクセル単位)。デフォルト値は、線形スケールの場合、主要グリッド線の minSpacing の 1/2、対数スケールの場合、minSpacing の 1/5 です。 タイプ: 数値
デフォルト: 計算済み
|
vAxis.minorGridlines.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 |
このオプションは 型: 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 軸の目盛りを、指定した配列に置き換えます。配列の各要素は、有効な目盛り値(数値、日付、日時、timeofday など)またはオブジェクトである必要があります。オブジェクトの場合は、目盛り値の
例:
型: 要素の配列
デフォルト: auto
|
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
デフォルト: 「pretty」と同じですが、使用した場合、
vaxis.viewWindow.min と vaxis.viewWindow.max が優先されます。
|
vAxis.viewWindow |
縦軸の切り抜き範囲を指定します。 タイプ: オブジェクト
デフォルト: null
|
vAxis.viewWindow.max |
レンダリングする垂直データの最大値。
タイプ: 数値
デフォルト: auto
|
vAxis.viewWindow.min |
レンダリングする垂直データの最小値。
タイプ: 数値
デフォルト: auto
|
幅 |
グラフの幅(ピクセル単位)。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
メソッド | |
---|---|
draw(data, options) |
グラフを描画します。グラフは、 戻り値の型: none
|
getAction(actionID) |
リクエストされた 戻り値の型: オブジェクト
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getChartAreaBoundingBox() |
グラフ コンテンツの左、上、幅、高さを含むオブジェクトを返します(ラベルと凡例を除く)。
値はグラフのコンテナを基準とします。グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getChartLayoutInterface() |
グラフの画面上の位置とその要素に関する情報を含むオブジェクトを返します。 返されたオブジェクトに対して、次のメソッドを呼び出すことができます。
グラフが描画された後に呼び出されます。 戻り値の型: オブジェクト
|
getHAxisValue(xPosition, optional_axis_index) |
例: グラフが描画された後に呼び出されます。 戻り値の型: number
|
getImageURI() |
画像の URI としてシリアル化されたグラフを返します。 グラフが描画された後に呼び出されます。 PNG チャートの印刷をご覧ください。 戻り値の型: string
|
getSelection() |
選択したグラフ エンティティの配列を返します。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
バーはデータテーブルのセル、凡例のエントリは列に対応し(行インデックスは null)、カテゴリは行に対応します(列インデックスが null)。
このグラフでは、任意の時点で選択できるエンティティは 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() |
指定したグラフ エンティティを選択します。前の選択をキャンセルします。
選択可能なエンティティは、バー、凡例のエントリ、カテゴリです。
バーはデータテーブルのセル、凡例のエントリは列に対応し(行インデックスは null)、カテゴリは行に対応します(列インデックスが null)。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: none
|
clearChart() |
チャートを消去し、割り当て済みリソースをすべて解放します。 戻り値の型: none
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、イベントを発生させるをご覧ください。
名前 | |
---|---|
animationfinish |
遷移アニメーションの完了時に呼び出されます。 Properties(プロパティ): なし
|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生したときに呼び出されます。 プロパティ: id、message
|
legendpagination |
ユーザーが凡例のページ分け用の矢印をクリックすると呼び出されます。現在の凡例のゼロベースのページ インデックスと総ページ数を返します。 プロパティ: currentPageIndex、totalPages
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 プロパティ: row、column
|
onmouseout |
ユーザーがビジュアル エンティティからマウス離れたときに呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを渡します。 プロパティ: row、column
|
ready |
グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、 Properties(プロパティ): なし
|
select |
ユーザーがビジュアル エンティティをクリックしたときに呼び出されます。選択された内容を確認するには、 Properties(プロパティ): なし
|
データポリシー
すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。