Математические формулы

Вы можете создать изображение, показывающее математическую формулу, используя язык TeX.

Обзор

Вы можете создать изображение математической формулы, используя язык TeX (произносится как «тек» или «тек»). Это полезно для отображения сложных формул на вашей веб-странице. Вот несколько примеров формул, отображаемых на лету:

Quadratic equation

Скопируйте и вставьте URL-адреса изображений в браузер, чтобы увидеть URL-адрес, по которому создается каждое изображение.

Укажите свою формулу, используя язык TeX, в свойстве src и теге <img> , и формула будет возвращена в виде PNG-файла. Или, если хотите, вы можете отправить запрос GET программно, чтобы получить формулу PNG.

Синтаксис

Корневой URL-адрес: https://chart.googleapis.com/chart?

Запросы изображений по формулам поддерживают следующие параметры URL-запроса после знака ? в корневом URL:

URL-параметр Обязательный или необязательный Описание
cht=tx Необходимый Указывает, что это изображение типа формулы.
chl=< data > Необходимый Формула для рендеринга на языке TeX. Вы должны URL-кодировать формулу; подробности см. ниже.
chs=< width >x< height > Необязательный Размер изображения в пикселях. Если вы не укажете это, размер будет рассчитан автоматически. Если вы укажете одно значение, это будет высота, а ширина будет рассчитана за вас.
chf Необязательный Поддерживаются все типы заливки фона. См. «Фоновая заливка» .
chco Необязательный Определяет цвет текста. По умолчанию черный.

URL-кодирование данных chl

Помните, что вы должны закодировать 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 %2B b^2=c^2

Фоновая заливка ( chf )

Для изображения можно указать сплошную, градиентную или полосатую заливку. Все заливки задаются с помощью параметра chf , и вы можете смешивать разные типы заливок (сплошные, полосатые, градиенты) в одном изображении, разделяя значения символом вертикальной черты ( | ).

Сплошная заливка

Вы можете указать сплошную цветную заливку с прозрачностью или без нее или сделать все изображение прозрачным.

Синтаксис

chf=<fill_type>,s,<color>|...
< тип_заполнения >
Укажите одно из следующих значений:
  • bg — заливка фона. Фон можно сделать прозрачным, если указать значение альфа в параметре <color> .
  • a - Прозрачность изображения. Первые шесть цифр < color > игнорируются, и применяются только последние две (значение прозрачности).
с
Определяет сплошную заливку.
< цвет >
Цвет заливки в шестнадцатеричном формате RRGGBB[ AA ], где AA — необязательное значение прозрачности (альфа).

Примеры

Описание Пример

Формула с синим фоном.

Red line chart with black area fill.

chf=bg,s,0000EF

То же, что и выше, но фон делается слегка прозрачным за счет использования двух буквенно-цифровых цифр 80, что соответствует примерно 50% прозрачности. Обратите внимание, что фон формулы прозрачен, но не текст.

Red line chart with black chart area and pale gray background.

chf=bg,s,0000EF80

В этом примере прозрачность применяется ко всему изображению. Обратите внимание, как фон ячейки таблицы отображается как в тексте, так и в фоновом режиме. Изображение объединяет два фона с помощью символа вертикальной черты:

  • a,s,00000080 — применяет прозрачность ко всему изображению.
  • bg,s,0000EF — применяет синий фон. Фон также делается прозрачным с помощью предыдущего параметра.

Scatter plot with points in blue, and a 50% transparency.

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

Вернуться наверх

Градиентная заливка

К формуле можно применить одну или несколько градиентных заливок. Градиентная заливка — это переход от одного цвета к другому.

Каждая градиентная заливка определяет угол, а затем два или более цветов, привязанных к указанному местоположению. Цвет меняется по мере перемещения от одного якоря к другому. У вас должно быть как минимум два цвета с разными значениями <color_centerpoint> , чтобы один мог плавно переходить в другой. Каждый дополнительный градиент определяется парой <color> , <color_centerpoint> .

Синтаксис

chf=bg,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
бг
Заливка фона.
LG
Определяет градиентную заливку.
< угол >
Число, определяющее угол градиента от 0 (по горизонтали) до 90 (по вертикали).
< цвет >
Цвет заливки в шестнадцатеричном формате RRGGBB.
<color_centerpoint>
Указывает точку привязки для цвета. С этой точки цвет начнет тускнеть по мере приближения к другому якорю. Диапазон значений составляет от 0,0 (нижний или левый край) до 1,0 (верхний или правый край), наклоненный под углом, заданным < угол >.

Примеры

Описание Пример

Формула имеет горизонтальный линейный градиент, заданный с углом в ноль градусов ( 0 ).

  • chf=bg,lg — определяет градиентную заливку.
  • 0 — наклон нулевого градуса
  • FFE7C6 — градиент персикового цвета по центру слева (позиция 0 ).
  • 76A4FB,1 — градиент синего цвета по центру справа (позиция 1.0 ).

Peach/blue gradient at zero degrees

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

То же, что и выше, но с уклоном 45 градусов.

Peach/blue gradient at 45 degrees

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

Вернуться наверх

Полосатые заливки

Для формулы можно указать полосатую фоновую заливку.

Синтаксис

chf=
  bg,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
бг
Заливка фона
лс
Задает заливку линейными полосами.
< угол >
Угол всех полос относительно оси Y. Используйте 0 для вертикальных полос или 90 для горизонтальных полос.
< цвет >
Цвет этой полосы в шестнадцатеричном формате RRGGBB. Повторите < цвет > и < ширину > для каждой дополнительной полосы. У вас должно быть как минимум две полоски. Полосы чередуются, пока изображение не заполнится.
< ширина >
Ширина этой полосы от 0 до 1 , где 1 — полная ширина изображения. Полосы повторяются до тех пор, пока изображение не заполнится. Повторите < цвет > и < ширину > для каждой дополнительной полосы. У вас должно быть как минимум две полоски. Полосы чередуются, пока изображение не заполнится.

Примеры

Описание Пример
  • bg,ls,0 — фоновые полосы под углом ноль градусов к оси y (параллельно оси y).
  • CCCCCC,0.15 — первая полоса темно-серая, ее ширина составляет 15 % ширины изображения.
  • FFFFFF,0.1 — вторая полоса белая, ее ширина составляет 10 % ширины изображения.
Formula with vertical stripes
chf=bg,ls,0,CCCCCC,0.15,FFFFFF,0.1
  • c,ls,90 — Фоновые полосы под углом девяносто градусов к оси Y.
  • 999999,0.25 — Первая полоса темно-серая, ее ширина составляет 25 % ширины изображения.
  • CCCCCC,0.25 — То же, что и первая полоса, но более светло-серого цвета.
  • FFFFFF,0.25 — То же, что и первая полоса, но белого цвета.
Formula with horizontal stripes
chf=bg,ls,90,999999,0.25,CCCCCC,0.25,FFFFFF,0.25

Вернуться наверх