Google Chart API
デベロッパー ガイド
Google Chart API を使用すると、チャートを動的に生成することができます。Chart API の動作を見るには、ブラウザ ウィンドウを開き、次の URL をコピーして貼り付けます。
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
Enter キーまたは Return キーを押すと、すぐに次の画像が表示されるはずです。
目次
対象読者
この文書は、ウェブ ページに Google Chart API 画像を表示させたいプログラマを対象としています。ここでは、API の使用方法と、用意されたパラメータに関する参考資料について説明します。
利用ポリシー
Google Chart API へコールを行う 1 日の回数に制限はありません。ただし、Google が悪意があるとみなした使用方法はブロックする権利を有しており、サービス利用の明示的な拒否などを行うことができます。1 日に 250,000 以上の API コールを行うサービスである場合、概算を chart-api-notifications@google.com までお知らせください。
はじめに
Google Chart API は、URL へのレスポンスとして PNG 形式の画像を返します。生成できる画像には、たとえば折れ線グラフ、棒グラフ、円グラフなど、いくつかのタイプがあります。それぞれの画像タイプに対して、サイズ、色、ラベルなどの属性を指定することができます。
ウェブ ページに Chart API 画像を表示するには、<img> タグに URL を埋め込みます。Chart API は、ウェブ ページがブラウザで表示される際に、そのページに画像をレンダリングします。
この文書の画像はすべて、 Chart API を使用して生成したものです。画像の URL を表示するには:
- Firefox の場合は、右クリックし、
View imageまたはPropertiesをクリックします。 - Internet Explorer の場合は、右クリックし、
Propertiesをクリックします。
この文書では、Chart API URL で要求されるフォーマットと、用意されているパラメータについて説明します。
URL フォーマット
Google Chart API URL は、次のフォーマットに従う必要があります。
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>
注: URL は全体が 1 行で記述されている必要があります。
パラメータとパラメータの間は、アンパサンド (&) 文字で区切ります。指定できるパラメータの数と順序に制限はありません。たとえば、次の URL に対して、Chart API は次のチャートを返します。
http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World
ここでは:
http://chart.apis.google.com/chart?はChart API がある場所です。&はパラメータの区切り文字です。chs=250x100はチャートのサイズです (ピクセル単位)。chd=t:60,40はチャートのデータです。cht=p3はチャートのタイプです。chl=Hello|Worldはチャートのラベルです。
HTML 文書に Chart API 画像を表示するには、<img> タグに URL を埋め込みます。たとえば、次の <img> タグを使用すると、上と同じ画像が生成されます。
<img src="http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World"
alt="Sample chart" />
注: URL を HTML の <img> タグに埋め込む場合は、アンパサンド (&) の代わりに、文字実体参照 & を使用してください。
必須パラメータとオプション パラメータ
少なくとも次のパラメータは入力する必要があります。
他のパラメータはすべてオプションです。次の表に、オプション パラメータをチャート タイプごとに示します。
| パラメータ | 棒グラフ | 折れ線グラフとスパークライン | レーダー チャート | 散布図 | ベン図 | 円グラフ | Google- o-meter |
Maps |
|---|---|---|---|---|---|---|---|---|
| チャートの色 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| 無地塗りつぶし | ○ | ○ | ○ | ○ | ○ | ○ | 背景のみ | 背景のみ |
| データ スケーリング | ○ | ○ | ○ | ○ | ○ | ○ | ○ | |
| 線形グラデーション | ○ | ○ | ○ | ○ | ○ | 背景のみ | ||
| 線形ストライプ | ○ | ○ | ○ | ○ | ○ | 背景のみ | ||
| チャート タイトル | ○ | ○ | ○ | ○ | ○ | ○ | ||
| チャート凡例 | ○ | ○ | ○ | ○ | ○ | |||
| 複数軸ラベル | ○ | ○ | ○ | ○ | ||||
| グリッド線 | ○ | ○ | ○ | ○ | ||||
| 図形マーカー | ○ | ○ | ○ | ○ | ||||
| 水平範囲マーカー | ○ | ○ | ○ | ○ | ||||
| 垂直範囲マーカー | ○ | ○ | ○ | ○ | ||||
| 線のスタイル | ○ | ○ | ○ | |||||
| 塗りつぶし領域 | ○ | ○ | ○ | |||||
| バーの太さと間隔 | ○ | |||||||
| 棒グラフの 0 座標位置 | ○ | |||||||
| 円グラフと Google-o-meter のラベル | ○ | ○ |
チャート サイズ
チャートのサイズは、chs=<width in pixels>x<height in pixels> で指定します。
たとえば、chs=300x200 の場合、横 300ピクセル、縦 200 ピクセルのチャートが生成されます。
地図以外のすべてのチャートの最大領域は 300,000 ピクセルです。横と縦の最大値は1000 ピクセルなので、最大サイズの例は 1000x300、300x1000、600x500、500x600、800x375、375x800 のようになります。
地図では、最大値は横が 440 ピクセル、縦が 220 ピクセルです。
指定したサイズが小さすぎると、円グラフはトリミングされます (一部しか表示されません)。円グラフの一般的なサイズのガイドライン:
- 2 次元チャートの場合、横が縦の約 2 倍である必要があります。
- 3 次元チャートの場合、横が縦の約 2.5 倍である必要があります。
チャート データ
チャートを作成するには、Chart API が認識できる形式にデータをエンコードする必要があります。以下の形式のいずれかを使用:
- テキスト エンコードは 0 から 100 までの正の浮動小数点値の文字列を使用します。
データ スケーリングのあるテキスト エンコードは、スケーリング パラメータと共に任意の正または負の不動小数点値の組み合わせの文字列を使用します。これは、地図では使用できません。
データ ポイントあたり 5 個のピクセルを割り当てるとすると、約 500 ピクセルまでの折れ線グラフと棒グラフには整数 (1.0、2.0、……) で十分です。高解像度を希望する場合、小数第一位 (35.7 など) を含めます。テキスト エンコードは、サイズに関わらずすべてのタイプのチャートに適しています。通常このタイプのエンコーディングは、与えられたデータ セットの中の最長の URL となります。 - 簡易エンコードは英数字 (A～Z、a～z、0～9) を使用します。ここで、
Aは 0 を、Bは 1 を意味し、最後に9は 61 を表します。このようにして、62 通りの異なる解像度の値を提供します。
データ ポイントあたり 5 個のピクセルを割り当てるとすると、約 300 ピクセルまでの折れ線グラフと棒グラフにはこのエンコードで十分です。このタイプのエンコーディングは、与えられたデータ セットの中の最短の URL となります。 - 拡張エンコードは、英数字 (および後に説明するそれ以外のいくつかの文字) のペアを使用します。ここで、
AAは 0 を、ABは 1 を意味し、最後に 2 つのピリオド (..) は 4095 を表します。このようにして、4,096 通りの異なる解像度の値を提供します。
拡張エンコードは大きなデータ範囲の大きなチャートに適しています。このタイプのエンコーディングは、与えられたデータに対し、簡易エンコードと比べて 2 倍の長さの URL を提供します。
注: 簡易エンコードおよび拡張エンコードでは、データをプログラム的にエンコードするのが望ましいでしょう。先ず、データ エンコード用の JavaScript スニペット を参照してください。また、チャート グループのメンバーが API ライブラリを提供しています。Group で探すか、Useful links to API libraries の投稿を参照してください。
テキスト エンコード
テキスト エンコードは次のように指定します。
chd=t:<chart data string>
<chart data string> は 0 (0.0) から 100.0 までの正の不動小数点数、マイナス 1 (-1)、パイプ文字 (|) からなります。
注:
- ゼロ (
0.0) = 0、1.0= 1、以下同様で100.0= 100。 - 値の欠落を指定するには -1 (
-1) を使用します。 - データ セットが複数ある場合は、各セットをパイプ文字 (
|) で区切ります。
例: chd=t:10.0,58.0,95.0|30.0,8.0,63.0
注: テキスト エンコードは、データ セット内の最大値を使用してパーセントに変換しデータ スケーリングを行います。
データ スケーリングのあるテキスト エンコード
2 つのパラメータを使用し、データ スケーリングのあるテキスト エンコードを指定します。
chd=t:<chart data string>
chds=<data set 1 minimum value>,<data set 1 maximum
value>,<data set n minimum value>,<data set n maximum value>
ここでは:
-
<chart data string>は正または負の浮動小数点値 <data set 1 minimum value>は最初のデータ セットに適用する最小値<data set 1 maximum value>は最初のデータ セットに適用する最大値、100 の指定は除外<data set n minimum value>は n 番目のデータ セットに適用する最小値<data set n maximum value>は n 番目のデータセットに適用する最大値、100 の指定は除外
データ セットより少ないデータ スケーリング パラメータを指定した場合、最後のスケーリング パラメータは残りのデータ セットに適用されます。チャートに単一の範囲を適用する場合は、1 つのペアのスケーリング パラメータを指定します。
注:
- これは地図には適用されません。
- 範囲外の値により、欠損値を指定できます。
- データ セットが複数ある場合は、各セットをパイプ文字 (
|) で区切ります。
例: chd=t:30,-60,50,120,80&chds=-80,140
簡易エンコード
簡易エンコードは次のように指定します。
chd=s:<chart data string>
ここで、<chart data string> には次の文字が含まれます: A～Z、a～z、0～9、アンダースコア (_)、コンマ (,)。
注:
- 大文字の場合、
A= 0、B= 1、以下同様でZ= 25。 - 小文字の場合、
a= 26、b= 27、以下同様でz= 51。 - ゼロ (
0) = 52、以下同様で9= 61。 - 欠損値を指定するにはアンダースコア (
_) を使用します。 - データ セットが複数ある場合は、各セットをコンマ (
,) で区切ります。
データが 2 セットある場合の例: chd=s:ATb19,Mn5tz この最初のデータ セットで、A は 0 を、T は 19、b は 27、1 は 53、9 は 61 を表します。
注: 詳しい一覧表は、簡易エンコードの文字値を参照してください。
拡張エンコード
拡張エンコードは次のように指定します。
chd=e:<chart data string>
ここで、<chart data string> には、次の文字のペアが含まれます: A～Z、a～z、0～9、ハイフン (-)、ピリオド (.)、アンダースコア (_)、コンマ (,)。
注:
AA= 0、AZ= 25、Aa= 26、Az= 51、A0= 52、A9= 61、A-= 62、A.= 63
BA= 64、BZ= 89、Ba= 90、Bz= 115、B0= 116、B9= 125、B-= 126、B.= 127
.A= 4032、.Z= 4057、.a= 4058、.z= 4083、.0= 4084、.9= 4093、.-= 4094、..= 4095。- 欠損値を指定するにはアンダースコアを 2 つ並べて (
__) 使用します。 - データ セットが複数ある場合は、各セットをコンマ (
,) で区切ります。
注: 詳しい一覧表の生成手順は、拡張エンコードの文字値を参照してください。
データ エンコード用 JavaScript スニペット
実際のデータを Chart API データに変換するには、手作業でなくプログラム的に行った方が簡単です。
次の JavaScript スニペットは、データ セットを簡易エンコードにエンコードします。データ セットは、正の数の配列として指定する必要があります。正数でないデータ セット値は、アンダースコア (_) を使って、欠落している値としてエンコードされます。
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function simpleEncode(valueArray,maxValue) {
var chartData = ['s:'];
for (var i = 0; i < valueArray.length; i++) {
var currentValue = valueArray[i];
if (!isNaN(currentValue) && currentValue >= 0) {
chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
}
else {
chartData.push('_');
}
}
return chartData.join('');
}
simpleEncode 関数を呼び出して、配列 (valueArray) と、その配列内での最大値 (maxValue) を渡します。次の例では、maxValue を配列内で最も大きい数値より大きく設定することで、最高値とチャートの上端の間に多少の空間を確保しています。
var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65); var maxValue = 70; simpleEncode(valueArray,maxValue);
粒度に関するガイドライン
チャートに必要なデータ点の数を過大に見積もらないように注意してください。たとえば、過去 10 年間に、ブリトニー・スピアーズがどれくらい人気があったかを示すために、毎日の検索クエリ件数を集約すると、3600 以上の値が必要になります。これは 1 つの URL で渡すデータとしては多すぎ、また、この粒度でグラフをプロットしても意味がありません。1024 ピクセル幅の画面では、1 つのデータ点が画面上でおよそ 4 分の 1 ピクセルになります。次の例でこのことを説明しましょう。
200 x 100 のチャートにデータ点が 20 個 ある場合 (データ点あたり 10 ピクセル)
データ点が 40 個 ある場合 (データ点あたり 5 ピクセル)
データ点が 80 個 ある場合 (データ点あたりわずか 2.5 ピクセル)
チャート タイプ
次のタイプのチャートが用意されています。
折れ線グラフ
折れ線グラフは次のように指定します。
cht=<line chart type>
ここで、<line chart type> は lc または lxy です。次の表で説明します。
- タイプ
lcのチャートでは、複数のデータ セットが複数の折れ線として描画されます。 - タイプ
lxyのチャートでは、それぞれの折れ線に対してデータ セットのペアが必要です。 - 複数のデータ セットを指定する方法の詳細は、チャート データを参照してください。
- 用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。
| パラメータ | 説明 | 例 |
|---|---|---|
|
データ点が x 軸に沿って均等に配置された折れ線グラフ。 |
|
|
描画する折れ線それぞれに対して、データ セットのペアを指定します。各ペアの最初のデータ セットは x 軸座標、2 番目のデータ セットが y 軸座標を指定します。 データ点を x 軸に沿って均等に配置するには、1 つの未定義値を指定します。この例のチャートはテキスト エンコードを使用しているので、未定義値は さまざまなデータ点の形を 折れ線の色を指定します。これについては色の項で説明します。 |
cht=lxy |
スパークライン
スパークラインは次のように指定します。
cht=ls
スパークラインは、折れ線グラフと全く同じパラメータを指定します。違いは、スパークラインの場合はデフォルトで軸が描かれないことです。必要に応じて軸ラベルを追加できます。複数軸ラベルの項を参照してください。
棒グラフ
棒グラフは次のように指定します。
cht=<bar chart type>
ここで、<bar chart type> は bhs、bhg、bvs、または bvg です。次の表で説明します。
- 棒グラフのタイプにより、複数のデータ セットが積み重なったバーで描画される場合と、バーのグループで描画される場合があります。
- 複数のデータ セットを指定する方法の詳細は、チャート データを参照してください。
- 用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。
| パラメータ | 説明 | 例 |
|---|---|---|
|
それぞれ、水平および垂直の棒グラフ。 最初の例 (濃い青で描かれたすべての棒) には 1 つのデータ セットがあります。 2 つ目の例 (濃い青および薄い青の棒) には 2 つのデータ系列があります。 ご覧の通り、複数データ セットは積み上げられるため、それぞれのデータ セットの色を指定する必要があります。また、単一データ セットの場合も各データ ポイントの色を指定できます。詳細は色の項を参照してください。 2 つ目の例はデータ スケーリングを使用していないため、100 以上の値が組み合わさっているデータ ポイントは範囲外に表示されています。 3 つ目の例はデータ スケーリングを使用しているため、棒は正しくスケーリングされています。 |
|
|
それぞれ、水平および垂直の棒グラフ。色が指定されており、複数データ セットがグループにまとめられています。 |
cht=bhg
|
|
棒グラフのサイズは、他のチャート タイプと異なる方法で処理されます。 タイプ このため、バーの太さと間隔を、以下のように指定するとよいでしょう。 注: 3 番目のパラメータ (バーの間隔) が指定されない場合、デフォルトで、グループ間の間隔の半分の値が使用されます。 |
|
円グラフ
円グラフは次のように指定します。
cht=<pie chart type>
ここで、<pie chart type> は p または p3 です。次の表で説明します。
- 指定するデータ セットは 1 つのみです。それ以降のデータ セットは無視されます。
- 用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。
注: Google Chart API は、チャート サイズ (chs) パラメータに指定された幅と高さの最小値から円の半径を計算します。指定されたサイズが小さすぎる場合、チャートはクリップされます。ラベルを含める場合、幅は高さの 2 倍に指定する必要があります。
| パラメータ | 説明 | 例 |
|---|---|---|
|
2 次元の円グラフ。 特に指定しない限り、円の切片は段階的に濃いオレンジから薄い黄色に描画されます。他の色を指定する方法は、色の項で説明します。 ラベルは |
|
|
3 次元の円グラフ。 ラベルは |
|
ベン図
ベン図は次のように指定します。
cht=v
次のようなデータ セットを指定します。
- 最初の 3 つの値は、3 つの円 A、B、C の相対的なサイズを指定します。
- 4 番目の値は、A と B の交わりの面積を指定します。
- 5 番目の値は、A と C の交わりの面積を指定します。
- 6 番目の値は、B と C の交わりの面積を指定します。
- 7 番目の値は、A と B と C の交わりの面積を指定します。
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例で、最初の円は 100、2 番目は 80、3 番目は 60 と指定されています。すべての円が重なっている部分は 30 と指定されています。 ベン図に用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。 |
|
散布図
散布図は次のように指定します。
cht=s
- 複数のデータ セットを指定する方法の詳細は、チャート データを参照してください。
- 用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。
| パラメータ | 説明 | 例 |
|---|---|---|
|
2 つのデータ セットを指定します。最初のデータ セットは x 座標、2 番目のデータ セットは y 座標を指定します。 データ点のデフォルトの形は円です。さまざまなデータ点の形を データ点のデフォルトの色は青です。他の色を指定する方法は、色の項で説明します。 この例を見ると、さまざまなサイズのデータ点があります。このようにするには、3 番目のデータ セットを指定します。 |
|
レーダー チャート
レーダー チャートは次のように指定します。
cht=r または cht=rs
r タイプのチャートでは、点は直線で繋がれます。
rs タイプのチャートでは、点はゆるやかな曲線で繋がれます。
- 複数のデータ セットは複数の線で描かれます。
- 複数のデータ セットを指定する方法の詳細は、チャート データを参照してください。
- 用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。
| パラメータ | 説明 | 例 |
|---|---|---|
|
最初にいくつかのサンプルを表示します。 データ ポイントはチャートの中心と周囲の間に描かれます。値が 0 のポイント (エンコーディングのタイプにより、 データ系列の最初の値と最後の値は、チャートの中心とチャートの頂点の間に描かれます。それ以外は、チャートの周りに時計回りに均等に描かれます。 |
|
|
|
次にもっと面白い例を示します。 このチャートには 2 つのデータ セットがあり、それぞれの色は 線のスタイルは ラベルは、 注: ラベルが含まれている場合、チャートの周りの空白はラベルの数またはデータ ポイント数 - 1 のいずれか大きいほうの数となります。 |
chco=FF0000,FF9900 |
|
この例は上と同じですが、両方のデータ セット共に領域が塗りつぶされています。詳細は塗りつぶし領域を参照してください。 また、グリッドも指定されています。詳細はグリッド線の項を参照してください。
|
chg=25.0,25.0,4.0,4.0 |
|
この例には、図形マーカーが指定されています。
範囲マーカーも指定できます。詳細は、範囲マーカーの項を参照してください。 |
chm= |
Maps
地図は次のように指定します。
cht=t と chtm=<geographical area>
<geographical area> は次のいずれかとなります。
africaasiaeuropemiddle_eastsouth_americausaworld
次に例を示します。
chs=440x220
chd=s:_
cht=t
chtm=world
注: データ スケーリングのあるテキスト エンコードは地図では利用できません。その代わりに、テキスト エンコード、簡易エンコードまたは拡張エンコードを使用します。
世界地図のデフォルトです。例で使用しているサイズ (440 x 220 ピクセル) は、すべての地図で利用可能な最大値です。また、データ セットには文字が 1 つしか含まれておらず、それは アンダースコア (_) であることにご注意ください。これは簡易エンコードの欠損値を指定するためのもので、最も単純な地図を表示します。また、地図上の 1 つ以上の国に色を指定することで、上記の地図にもっと多くの興味深い情報を追加することができます。
3 つのパラメータを組み合わせて、地図の色や、地図内の各国や州にどのように適用するかを指定します。
chco=<default color><colors for gradient>
chld=<list of codes for each country or state to be colored>
chd=<list of values for each country or state to be colored>
ここでは:
<default color>と<colorsfor gradient>は RRGGBB 形式の 8 進数です。chldパラメータに含まれていない国や州には、デフォルトの色が適用されます。他の色は、chldパラメータに含まれているすべての国を塗りつぶすのに使用される色のグラデーションの極限値を指定します。適用される色は、chdパラメータ内のその国の値により異なります。<list of codes for each country or state to be colored>は次のいずれかのリストです。- 国の ISO 3166-1-alpha-2 コードは ISO3166 で定義されています。ISO 3166 国コードを参照してください。
- 米国の州コードは米国の州コードに一覧表示しています。
<list of values for each country or state to be colored>は簡易エンコード、テキスト エンコード、拡張エンコードの値です。最初の値は、chldパラメータに表示された最初の国に使用され、2 つ目の値は 2 つ目の国に使用され、と以下同様に続きます。最小値は使用されるエンコーディングの種類によりA、0またはAAとなり、chcoの<color for start of gradient>で指定された色で描画されます。最大値、9、100または..は<color for end of gradient>で指定した色で描画されます。中間値は中間色を指定します。
次に例を示します。
chtm=africa
chco=ffffff,edf0d4,13390a
chld=MGKETN
chd=s:Af9
chf=bg,s,EAF7FE
この例では:
- 最初の色 (白を表す
ffffff) はchldパラメータには含まれていない任意の国を指定します。 - 2 つ目の色および 3 つ目の色は、薄い緑 (
edf0d4) から濃い緑 (13390a) までの色のグラデーションを指定します。
- 塗りつぶされる国は、マダガスカル (
MG)、ケニヤ (KE) およびチュニジア (TN) です。 - マダガスカルには
Aが指定されており、これは簡易エンコードの最小値であり 0 を意味します。
よって、マダガスカルは薄い緑 (edf0d4) で描かれます。 - ケニヤには
fが指定されており、これは 31 を意味します。よって、ケニヤは薄い緑と濃い緑の中間の色で描かれます。 - チュニジアには
9が指定されており、これは簡易エンコードの最大値であり 61 を意味します。
よって、チュニジアは濃い緑 (13390a) で描かれます。 - 海は地図の背景となるため、薄い青 (
EAF7FE) で描かれます。チャート領域と背景の塗りつぶしセクションのchfパラメータを参照してください。
もっと多くの色を使った例を示します。
chco=
f5f5f5,
edf0d4,
6c9642,
13390a
デフォルトの色は f5f5f5 です。色のグラデーションは、edf0d4、6c9642 および 13390a で指定されています。テキスト エンコードを使用し、これらの色がどのように適用されているかを説明します。
- 値 0 は最も薄い緑 (
edf0d4) で描画されます。 - 値 50 は中間の緑 (
6c9642) で描画されます。 - 値 100 は最も濃い緑 (
13390a) で描画されます。 - これらの値の間にある数は、最も近い色に補間されます。よって、例えば値 75 は中間の緑 (
6c9642) と最も濃い緑 (13390a) の間となります。
Google-o-meter
Google-o-meter を次のように指定します。
cht=gom
用意されているパラメータの詳細は、チャート タイプごとのオプション パラメータを参照してください。
| パラメータ | 説明 | 例 |
|---|---|---|
|
|
デフォルトの色 (左の色づけは赤、右に進むにつれオレンジ、黄色、緑へと変化) での Google-o-meter の例です。他の色の指定については、チャートの色を参照してください。 矢印の先に表示されるテキストの指定についての情報は、円グラフと Google-o-meter のラベルを参照してください。 |
|
色
色は、RRGGBB というフォーマットの 6 桁以上の 16 進値文字列で指定します。例:
FF0000= 赤00FF00= 緑0000FF= 青000000= 黒FFFFFF= 白
00 から FF の 8 進数の値を指定し、オプションで透明度を指定できます。00 は完全に透明であり、FF は完全に不透明です。例:
0000FFFF= 不透明の青0000FF00= 透明な青
色には次のオプションが用意されています。
チャートの色
線、棒、ベン図、Google-o-meter、円グラフの区分の色を次の通り指定します。
chco=
<color1>,
...
<colorn>
ここで、<color1> をはじめとする色の値はすべて、RRGGBB 形式の 16 進数です。
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例には 3 つのデータ セットがあり、3 つの色が指定されています。 |
|
|
この例にも 3 つのデータ セットがありますが、色は 2 つのみ指定されています。このため、後の 2 つの線が、どちらも後の色 (赤 |
|
|
棒グラフでは、指定された色の数がデータ セットの数より少ない場合、それらの色が交替で使用されます。次のチャートでは、3 番目のデータ セット |
|
|
ここでは、同じチャートに 3 つの色が指定されています。 |
|
|
|
|
|
円グラフでは、指定された色の数がスライスの数より少ない場合、色が段階的に使用されます。 |
|
|
| ベン図では、指定された色の数が円の数より少ない場合、最後に指定された色が繰り返して使用されます。 |
|
|
| Google-o-meter については、少なくとも 2 つの色を指定します。その間のグラデーションを指定する場合はさらに多くの色を指定します。zz | chco=ffffff,ffaaaa,ff0000 |
塗りつぶし領域
塗りつぶし領域は次のように指定します。
chm=
b,<color>,<start line index>,<end line index>,<any value>|
...
b,<color>,<start line index>,<end line index>,<any value>
ここでは:
<color>は RRGGBB フォーマットの 16 進数です。<start line index>塗りつぶしが開始される線のインデックス。これは、chdでデータ セットが指定されている順番により決定されます。最初に指定されたデータ セットのインデックスは0、2 番目は1、以下同様です。<end line index>塗りつぶしが終了する線のインデックス。これは、chdでデータ セットが指定されている順番により決定されます。最初に指定されたデータ セットのインデックスは0、2 番目は1、以下同様です。<any value>は無視されます。
複数の塗りつぶし領域はパイプ文字 (|)で区切ります。
| パラメータ | 説明 | 例 |
|---|---|---|
|
最も大きい値があるデータ セットを最初に指定するように注意してください。 最後の折れ線からチャートの下端までを塗りつぶすには、最も小さなデータ値のみがあるデータ セットだけを含めます ( 最後の折れ線からチャートの下端までを塗りつぶすには、最も小さなデータ値のみがあるデータ セットだけを含めます ( 線そのものは、
|
|
対照的に、最初と最後のデータ セット ( また、 |
|
|
|
単一のデータ系列では、 |
|
無地塗りつぶし
無地塗りつぶしは次のように指定します。
chf=
<bg or c or a>,s,<color>|
<bg or c or a>,s,<color>
ここでは:
<bg or c or a>は:
-bgは背景塗りつぶし
-cはチャート領域塗りつぶし
-aはチャート全体に透明度を適用<s>は無地塗りつぶしを示します。<color>は RRGGBB フォーマットの 16 進数です。- 塗りつぶしの定義はパイプ文字 (
|) で区切ります。2 番目の定義の後にパイプ文字は不要です。
次を指定可能:
- 背景、チャート領域塗りつぶし、折れ線グラフの透明度、散布図
- 棒グラフの背景塗りつぶしと透明度、円グラフ、ベン図
- 地図の背景塗りつぶし
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例は、画像の背景を薄いグレー ( |
|
|
この例は、背景を薄いグレー ( |
|
|
|
透明度の指定で、背景に 8 進数の 20、チャート領域に 80 を指定することの効果を注意します。 |
|
|
| この例では、チャート全体に透明度を適用しています。 |
|
線形グラデーション
折れ線グラフ、スパークライン、棒グラフ、ベン図、レーダー チャート、散布図の線形グラデーションを次のように指定します。
chf=<bg or c>,lg,<angle>,<color 1>,<offset 1>,<color n>,<offset n>
ここでは:
<bg or c>は、bg背景塗りつぶしの場合 、cチャート領域塗りつぶしの場合 です。lgが線形グラデーションの指定です。<angle>には、0 (水平)～90 (垂直) の範囲でグラデーションの角度を指定します。<color x>は RRGGBB フォーマットの 16 進数です。<offset x>は、色が純色である点を指定します。0がチャートの右端、1が左端です。
| パラメータ | 説明 | 例 |
|---|---|---|
|
チャート領域に、 青 ( 白 ( チャートの背景はグレー ( |
|
チャート領域に、 白 ( 青 ( チャートの背景は、これもグレー ( |
|
|
チャート領域に、 青 ( 白 ( チャートの背景は、これもグレー ( |
|
線形ストライプ
折れ線グラフ、スパークライン、棒グラフ、ベン図、レーダー チャート、散布図の線形ストライプを次のように指定します。
chf=<bg or c>,ls,<angle>,<color 1>,<width 1>,<color n>,<width n>
ここでは:
<bg or c>は、bg背景塗りつぶしの場合 、cチャート領域塗りつぶしの場合 です。lsが線形ストライプの指定です。<angle>には、0(垂直)～90(水平) の範囲でグラデーションの角度を指定します。<color>は RRGGBB フォーマットの 16 進数です。<width>0は ～ である必要があります。ここで、 はチャートの全幅を示します。11ストライプは、チャート全体に届くまで繰り返されます。
| パラメータ | 説明 | 例 |
|---|---|---|
|
角度 指定されている最初の色 (濃いグレー 指定されている 2 番目の色 (白 ストライプは、チャート全体に届くまで順番に繰り返されます。 チャートの背景は省略されます。 |
|
角度 指定されている最初の色 (濃いグレー 指定されている 2、3 番目の色 (薄いグレー ストライプは、チャート全体に届くまで順番に繰り返されます。 チャートの背景は省略されます。 |
|
ラベル
次のタイプのラベルが用意されています。
チャート タイトル
チャート タイトルは次のように指定します。
chtt=<chart title>
凡例
凡例を次のように指定します。
chdl=<first data set label>|<n data set label>
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例では、最初のデータ セットが赤、2 番目が緑、3 番目が青で描画されています。 |
chdl=First|Second|Third |
|
円グラフと Google-o-meter のラベル
円グラフでは、ラベルは次のように指定します。
chl=
<label 1 value>|
...
<label n value>
値の欠落を指定するにはパイプ文字を 2 つ並べて (||) 使用します。
注: ラベルを表示するには:
- 2 次元チャートの場合、横が縦の約 2 倍である必要があります。
- 3 次元チャートの場合、横が縦の約 2.5 倍である必要があります。
Google-o-meter では、矢印の先に表示されるテキストを次のように指定します。
chl=<label>
| パラメータ | 説明 | 例 |
|---|---|---|
chl |
3 次元円グラフのラベル。 |
|
もちろん、ラベルの長さによっても変わります。この例では、チャートの横が狭いためにラベルの一部が表示されていません。 |
|
|
ラベルを全部表示するには、チャートの横幅が 280 ピクセル必要です。 |
|
|
| ラベルのついた Google-o-meter の例です。 |
|
複数軸ラベル
複数軸ラベルは、折れ線グラフ、棒グラフ、レーダー チャート、散布図で使用可能です。
軸タイプ
複数軸は次のように指定します。
chxt=
<axis 1>,
...
<axis n>
使用できる軸は次のとおりです。
x= 下側の x軸t= 上側の x軸y= 左側の y 軸r= 右側の y 軸
軸は、chxt パラメータ指定におけるインデックスによって指定されます。最初の軸のインデックスは 0、2 番目の軸のインデックスは 1、以下同様です。x、t、y、r を複数回含めることによって、複数の軸を指定することができます。
複数の軸を作成するには、少なくとも chxt パラメータが必要です。他のパラメータが欠落している場合、Chart API はデフォルトを使用します。次の項を参照してください。
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例には 2 つの下側 軸 ( 注: 軸ラベルが省略されているため、Chart API により、すべての軸に 0～100 の範囲が設定されました。 |
|
軸ラベル
ラベルは次のように指定します。
chxl=
<axis index>:|<label 1>|<label n>|
...
<axis index>:|<label 1>|<label n>
index パラメータは、ラベルが適用される軸のインデックスを指定します。
ラベルはすべて、パイプ文字 (|) 文字で区切ります。
注: 軸ラベルは順番に指定する必要があります (0、1、2… の順)。
最初のラベルは先頭、最後のラベルは末端に配置され、その間の間隔は均等です。
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例には、左右の 軸 ( 注: 最後のパラメータの後にパイプ文字 () は不要です。 |
|
上の例と同じですが、左側の y 軸ラベル ( 注: 最後のパラメータの後にパイプ文字 () は不要です。 |
|
軸ラベル位置
ラベル位置は次のように指定します。
chxp=
<axis index>,<label 1 position>,<label n position>|
...
<axis index>,<label 1 position>,<label n position>
位置値には浮動小数点数を使用します。軸と軸はパイプ文字 (|) で区切ります。ラベル (chxl) を省略すると、ラベル テキストは位置値から取得されます。
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例には、左右の y 軸 ( x 軸 (インデックス 左側の 軸 ( 右側の y 軸 ( |
|
軸範囲
範囲は次のように指定します。
chxr=
<axis index>,<start of range>,<end of range>|
...
<axis index>,<start of range>,<end of range>
複数軸の範囲はパイプ文字 (|) で区切ります。
| パラメータ | 説明 | 例 |
|---|---|---|
|
この例には、左右の y 軸 ( 各軸に、定義された範囲があります。ラベルや位置が指定されていないため、値は均等に配置され、指定された範囲から取得されます。 注: 右側の y 軸 ( |
chxt=x,y,r
|
ここでは、 軸のみが定義されています ( |
chxl=0:|200|300|400 |
軸スタイル
軸ラベルのフォント サイズ、色、配置は次のように指定します。
chxs=
<axis index>,<color>,<font size>,<alignment>|
...
<axis index>,<color>,<font size>,<alignment>
ここでは:
<axis index>は、chxtで指定された軸インデックスです。<color>は RRGGBB フォーマットの 16 進数です。<font size>はオプションです。サイズはピクセル単位で指定されます。<alignment>はオプションです。デフォルトでは、x 軸ラベルは中央揃え、左側の y 軸ラベルは右揃え、右側の y 軸ラベルは左揃えになっています。配置を指定するには、中央揃えの場合は0、左揃えの場合は-1、右揃えの場合は1を指定します。
複数の値はパイプ文字 (|) で区切ります。
| パラメータ | 説明 | 例 |
|---|---|---|
|
2 番目の x 軸ラベルのフォント サイズ、色、配置が指定されています。 |
|
| 両方の x 軸ラベルのフォント サイズ、色、配置が指定されています。 | chxt=x,y,r,x |
スタイル
次のスタイルが用意されています。
バーの太さと間隔
棒グラフのバーの太さと間隔は、
で指定します
chbh=
<bar width in pixels>,
<optional space between bars in a group>,
<optional space between groups>
| パラメータ | 説明 | 例 |
|---|---|---|
|
最初の例では、バーの太さは 10 ピクセルに設定されています。バーの間隔は 4 ピクセル、グループの間隔は 8 ピクセルで、どちらもデフォルトどおりです。 2 番目の例では、バーの太さは 10 ピクセル、バーの間隔は 5 ピクセル、グループの間隔は 15 ピクセルに設定されています。 値を 2 つのみ入力する場合には注意が必要です。3 番目の例では、バーの間隔が 8 ピクセルに設定されています。これはグループの間隔のデフォルトと同じなので、視覚的に区別がつかなくなりました。8 より大きな値を指定すると、バーが不適切にグループ化されます。 |
|
棒グラフの 0 座標位置
棒グラフでは、0 座標位置は次のように指定します。
chp=
<value between 0 and 1 for dataset 1>,
<value between
0 and 1 for dataset n>
1 つの値のみを指定すると、すべてのデータ セットに同じ 0 座標位置が適用されます。
| パラメータ | 説明 | 例 |
|---|---|---|
|
|
この例では、
|
|
|
|
0 座標位置を指定する毛筆の方法は、テキスト エンコードとの組み合わせでデータ スケーリング パラメータ （ この例のデータ範囲は -60 から 120 まで、メモリは -80 から 140 までで棒の上下に空白を残しています。 詳細は、データ スケーリングのあるテキスト エンコードを参照してください。 |
chd=t:30,-60,50,120,80 |
線のスタイル
次のグラフの線のスタイルを指定できます。
- 折れ線グラフとスパークライン: 太さと点線の種類 (およびデータ セットの色を使用し色)
- 折れ線グラフ、スパークラインと棒グラフ: 太さ、色、優先度
折れ線グラフとスパークラインのスタイル
折れ線グラフとスパークラインのスタイルは次のように指定します。
chls=
<data set 1 line thickness>,<length of line segment>,<length of blank segment>|
...
<data set n line thickness>,<length of line segment>,<length of blank segment>
パラメータ値は浮動小数点数で、複数の線スタイルは、パイプ文字 (|) で区切ります。最初の線スタイルは最初のデータ セットに、2 番目のスタイルは 2 番目のデータ セットに、以下同様に適用されます。
| パラメータ | 説明 | 例 |
|---|---|---|
|
ここでは、 線の色の指定の詳細はチャートの色を参照してください。 |
chls=3,6,3|1,1,0 |
折れ線グラフ、スパークライン、棒グラフの線のスタイル
折れ線グラフと棒グラフのスタイルは次のように指定します。
chm=D,<color>,<data
set index>,<data point>,<size>,<priority>
ここでは:
<color>は RRGGBB フォーマットの 16 進数です。<data set index>は線を描画するデータ セットのインデックス。最初のデータ セットの場合0、2 番目の場合1、以下同様です。<data point>は 0。<size>はマーカーのサイズです (ピクセル単位)。<priority>は棒、線、マーカー、塗りつぶしが描画される順序:
1は、線が棒やマーカーの上に描画されることを示します。
0はデフォルトであり、線が棒の上、マーカーの下に描画されることを示します。
-1は線が棒とマーカーの下に描画されることを示します。
| パラメータ | 説明 | 例 |
|---|---|---|
chm=D |
棒グラフのデータ線の例です。優先度は |
chm= |
|
スパークライン チャートの例です。スパークラインは折れ線グラフと全く同じですが、デフォルトでは軸が表示されません。その機能も折れ線グラフと同一です。 |
chm= |
グリッド線
グリッド線は次のように指定します。
chg=
<x axis step size>,
<y axis step size>,
<length of line segment>,
<length of blank segment>
パラメータ値は、整数か、10.0 や 10.5 など、小数点以下 1 桁の小数です。
| パラメータ | 説明 | 例 |
|---|---|---|
|
ステップ サイズのみが定義されている例 ( |
|
ここでは、ステップ数 ( |