数式

TeX 言語を使用して、数式を示す画像を生成できます。

概要

TeX 言語（「tek」または「tech」と発音）を使用して、数式の画像を生成できます。これは、ウェブページに複雑な数式を表示する場合に便利です。オンザフライで表示される数式の例は次のとおりです。

二次方程式

画像の URL をコピーしてブラウザに貼り付け、各画像の生成元となった URL を確認します。

src プロパティと <img> タグで TeX 言語を使用して数式を指定すると、その数式が PNG ファイルとして返されます。または、GET リクエストをプログラムで送信して、数式の PNG を取得することもできます。

構文

ルート URL: https://chart.googleapis.com/chart?

数式の画像リクエストでは、? 記号の後の次の URL クエリ パラメータがサポートされています。で置き換えてください。

URL パラメータ 必須または任意 説明
cht=tx 必須 数式タイプの画像であることを指定します。
chl=<data> 必須 レンダリングする数式（TeX 言語）。数式は URL エンコードする必要があります。詳しくは下記をご覧ください。
chs=<width>x<height> 任意 画像サイズ（ピクセル単位）。指定しない場合、サイズは自動的に計算されます。 単一の値を指定すると、高さが使用され、幅は自動的に計算されます。
chf 任意 すべての背景の塗りつぶしタイプがサポートされています。背景の塗りつぶしを参照してください。
chco 任意 テキストの色を指定します。デフォルトは黒です。

chl データの URL エンコード

数式内で URL セーフでない文字を使用する場合は、URL エンコードを行う必要があります。URL エンコーダについては、こちらをご覧ください。

よくある間違いは、数式で %2B ではなく + を使用することです。次に例を示します。

URL エンコードなし URL エンコード
a^2 + b^2 = c^2
cht=tx&chl=a^2+b^2=c^2		 a^2 + b^2 = c^2
cht=tx&chl=a^2%2Bb^2=c^2

背景の塗りつぶし（chf）

画像には、無地、グラデーション、ストライプの塗りつぶしを指定できます。すべての塗りつぶしは chf パラメータを使用して指定します。値をパイプ文字（|）で区切ることで、同じ画像内で異なる塗りつぶしタイプ（単色、ストライプ、グラデーション）を混在させることができます。

単色塗りつぶし

透明度の有無にかかわらず無地の塗りつぶしを指定したり、画像全体を透明にしたりできます。

構文

chf=<fill_type>,s,<color>|...
<fill_typefill_type>
次のいずれかの値を指定します。
  • bg - 背景の塗りつぶし。<color> パラメータでアルファ値を指定すると、背景を透明にできます。
  • a - 画像の透明度。 <color> の最初の 6 桁は無視され、最後の 2 桁（透明度の値）のみが適用されます。
s
塗りつぶしを指定します。
<color>
塗りつぶしの色。16 進数形式 RRGGBB[AA] で指定します。AA は任意の透明度（アルファ）値です。

 

例

説明 例

背景が青色の数式。

黒い領域を塗りつぶした赤い折れ線グラフ。

chf=bg,s,0000EF

上記と同じですが、背景は 2 つの英数字（80）を使用してわずかに透明になります。これは約 50% の透明度に相当します。数式の背景が透明ですが、テキストがないことに注目してください。

グラフ領域が黒、背景が薄いグレーの赤い折れ線グラフ。

chf=bg,s,0000EF80

この例では、画像全体に透明度を適用しています。テーブルセルの背景が、背景とテキストを通じてどのように表示されるかに注目してください。この画像は、パイプ文字を使用して 2 つの背景を結合したものです。

  • a,s,00000080 - 画像全体に透明度を適用します。
  • bg,s,0000EF - 青色の背景を適用します。前のパラメータにより、背景も透明になります。

青色の点と透明度 50% の散布図。

chf=a,s,00000080|
  bg,s,0000EF

トップへ戻る

グラデーションの塗りつぶし

数式には 1 つ以上のグラデーションの塗りつぶしを適用できます。グラデーション塗りつぶしは、ある色から別の色にフェードする機能です。

グラデーションの塗りつぶしではそれぞれ角度を指定し、指定した位置に固定された 2 つ以上の色を指定します。アンカー間の移動によって色が変化します。<color_centerpoint> の値が異なる 2 つ以上の色を使用して、一方が他方にフェードインできるようにします。追加の各グラデーションは、<color> と <color_centerpoint> のペアで指定されます。

構文

chf=bg,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
bg
背景の塗りつぶし。
lg
グラデーションの塗りつぶしを指定します。
<angle>
0（水平）から 90（垂直）までのグラデーションの角度を指定する数値。
<color>
塗りつぶしの色（RRGGBB の 16 進数形式）。
<color_centerpoint>
色のアンカー ポイントを指定します。別のアンカーに近づくと、このポイントから色がフェードし始めます。値の範囲は 0.0（下端または左端）～ 1.0（上端または右端）で、<angle> で指定された角度で傾斜します。

 

例

説明 例

数式には、角度 0 度（0）で指定される水平線形グラデーションがあります。

  • chf=bg,lg - グラデーションの塗りつぶしを定義します。
  • 0 - 傾斜 0 度
  • FFE7C6,0 - 左側中央がピーチカラーのグラデーション（位置 0）
  • 76A4FB,1 - 右側中央にある青色のグラデーション（1.0 位置）。

0 度のピーチ/青のグラデーション

chf=bg,lg,0,FFE7C6,0,76A4FB,1

上と同じですが、45 度グラデーションを使用します。

45 度のピーチ/青のグラデーション

chf=bg,lg,45,FFE7C6,076A4FB,1

トップへ戻る

ストライプ塗りつぶし

数式にストライプの背景の塗りつぶしを指定できます。

構文

chf=
  bg,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
bg
背景の塗りつぶし
ls
線形ストライプ塗りつぶしを指定します。
<angle>
すべてのストライプの角度。Y 軸を基準として指定します。縦のストライプには 0、横のストライプには 90 を使用します。
<color>
このストライプの色（RRGGBB の 16 進数形式）。追加のストライプごとに <color> と <width> を繰り返します。ストライプが 2 つ以上必要です。画像が塗りつぶされるまでストライプが交互に表示されます。
<width>
このストライプの幅（0～1）。1 は画像の全幅です。画像が塗りつぶされるまでストライプが繰り返されます。追加のストライプごとに <color> と <width> を繰り返します。ストライプが 2 つ以上必要です。画像が塗りつぶされるまでストライプが交互に表示されます。

 

例

説明 例
  • bg,ls,0 - y 軸に対して 0 度の角度（y 軸に平行）で設定された背景のストライプ。
  • CCCCCC,0.15 - 最初のストライプは濃いグレーで、幅は画像の 15% です。
  • FFFFFF,0.1 - 2 つ目のストライプは白で、幅は画像の 10% です。
 縦ストライプの数式
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1
  • c,ls,90 - y 軸に対して 90 度の角度での背景のストライプ。
  • 999999,0.25 - 最初のストライプは濃いグレーで、幅は画像の 25% です。
  • CCCCCC,0.25 - 1 つ目のストライプと同じですが、より明るいグレーになります。
  • FFFFFF,0.25 - 最初のストライプと同じですが、白色です。
 横ストライプの数式
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25

トップへ戻る