Линейные графики

В этом документе описаны различные типы линейных диаграмм, которые можно создать с помощью Chart API.

Оглавление

Типы диаграмм ( cht )

Вы можете создавать различные линейные диаграммы. Укажите линейную диаграмму со следующим синтаксисом:

Синтаксис

cht=<chart_type>

Где < chart_type > — один из следующих типов:

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

lc

Линейный график, на котором точки данных равномерно расположены вдоль оси X. Осевые линии отображаются по умолчанию. Чтобы отобразить значения на осевых линиях, необходимо указать chxt .

Chart with line in yellow
cht=lc
chd=t:40,60,60,45,47,75,70,72

ls

Аналогично lc диаграммам, но по умолчанию не отображает линии осей. Они также известны как спарклайны .

Sparkline chart in blue
cht=ls
chd=t:27,25,60,31,25,39,25,
31,26,28,80,28,27,31,27,
29,26,35,70,25

lxy

Позволяет указать координаты x и y для каждой точки, а не только значения y.

Чтобы указать точки данных для диаграмм lxy , необходимо указать ряды, кратные двум. Первая серия в каждой паре — это координаты x этой линии, а вторая серия — соответствующие координаты y этой линии. Например:

chd=t:<line_1_x1>,<line_1_x2>,...|<line_1_y1>,<line_1_y2>,...|
      <line_2_x1>,<line_2_x2>,...|<line_2_y1>,<line_2_y2>,...

Чтобы равномерно распределить точки данных только по оси X , укажите одно неопределенное значение для набора x для этой серии. В этом примере красная линия «Единороги» равномерно распределяет точки данных вдоль оси X. Дополнительные сведения о неопределенных значениях см. в разделе Форматы данных .

В этом примере строка «Пони» указывает точные значения x и y для всех точек, а строка «Единороги» равномерно распределяет значения вдоль оси X.

Примечание. Если вы создаете составную диаграмму lxy , не забывайте, что вы должны отображать свои данные в формате, кратном двум, в параметре chd . Например: chd=t0: чтобы скрыть все линии, chd=t2: чтобы нарисовать одну линию, chd=t4: чтобы нарисовать две линии и так далее. Если вы укажете chd=t1: , линии рисоваться не будут; если вы укажете chd=t3: , будет нарисована только одна линия.

Line chart with unevenly spaced data points and lines in red, green and dashed blue
cht=lxy
chd=t:
10,20,40,80,90,95,99|
20,30,40,50,60,70,80|
-1|
5,10,22,35,85

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

Детализация данных

Будьте осторожны, чтобы не переоценить количество точек данных, необходимых для вашего линейного графика. Например, чтобы показать, насколько популярно шоколадное мороженое за последние десять лет, агрегирование поисковых запросов за каждый день даст более 3600 значений. Построение графика с такой степенью детализации не имело бы никакого смысла. На диаграмме шириной 1024 пикселя одна точка данных будет составлять примерно четверть пикселя. (Кроме того, это будет слишком много данных для передачи по URL-адресу). Следующие примеры иллюстрируют это положение.

Диаграмма шириной 200 пикселей с 40 точками данных (по 5 пикселей на точку данных):

Yellow line chart: less easy to read as data points are less spread along the x-axis

80 точек данных (всего 2,5 пикселя на точку данных):

Yellow line chart: difficult to read as data points are very squashed along the x-axis

150 точек данных (всего 1,3 пикселя на точку данных):

Yellow line chart: very difficult to read as data points are very squashed along the x-axis

300 точек данных (менее 1 пикселя на точку данных):

Yellow line chart: very difficult to read as data points are very squashed along the x-axis

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

Серия Цвета chco

Вы можете указать цвета конкретной серии или всех серий, используя параметр chco .

Синтаксис

chco=
<color_1>, ... <color_n>
< цвет >
Шестнадцатеричное число в формате RRGGBB . Укажите одно значение, чтобы применить один и тот же цвет ко всем сериям. Укажите разные цвета для разных серий, добавив значения цветов через запятую. Если у вас меньше цветов, чем серий, неопределенная серия будет циклически перебирать указанные цвета с самого начала.

Примеры

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

Если вы укажете один цвет для каждой серии, каждой серии будет присвоен назначенный цвет. В этом примере указаны три ряда данных и три цвета.

Line chart with one red, one blue, and one green line

chco=FF0000,00FF00,0000FF

В этом примере также есть три ряда данных, но указаны только два цвета. Поскольку цвет третьей серии не указан, третья линия рисуется с использованием первого цвета (красного).

Line chart with two red lines and one blue line

chco=FF0000,0000FF

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

Составные диаграммы

Вы можете добавить линии, свечи и маркеры фигур в линейный график, чтобы создать составную диаграмму. Более подробную информацию см. в разделе «Составные диаграммы» .

Стандартные функции

Остальные функции на этой странице являются стандартными функциями диаграмм.

Название графика chtt , chts [ Все графики ]

Вы можете указать текст заголовка, цвет и размер шрифта для диаграммы.

Синтаксис

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

chtt — указывает заголовок диаграммы.

< название_диаграммы >
Название для отображения диаграммы. Вы не можете указать, где это будет отображаться, но при желании вы можете указать размер и цвет шрифта. Используйте знак + для обозначения пробелов и символ вертикальной черты ( | ) для обозначения разрывов строк.

chts [ Необязательно ] — цвета и размер шрифта для параметра chtt .

<цвет >
Цвет заголовка в шестнадцатеричном формате RRGGBB . Цвет по умолчанию — черный.
<размер_шрифта >
Размер шрифта заголовка, в пунктах.
<opt_alignment>
[ Необязательно ] Выравнивание заголовка. Выберите одно из следующих строковых значений с учетом регистра: «l» (слева), «c» (по центру), «r» (справа). По умолчанию — «с».

Примеры

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

Диаграмма с заголовком, использующая цвет и размер шрифта по умолчанию.

Укажите пробел со знаком плюс ( + ).

Используйте символ вертикальной черты ( | ), чтобы вызвать разрыв строки.

chts здесь не указан.

Vertical bar chart with title
chtt=Site+visitors+by+month|
January+to+July

Диаграмма с синим заголовком размером 20 пунктов, выровненным по правому краю.

Vertical bar chart with blue, 20 pixel, title
chtt=Site+visitors
chts=FF0000,20,r

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

Текст и стиль легенды диаграммы chdl , chdlp , chdls [ Все диаграммы ]

Легенда — это боковая часть диаграммы, содержащая небольшое текстовое описание каждой серии. Вы можете указать текст, связанный с каждой серией в этой легенде, и указать, где на диаграмме он должен появиться.

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

Примечание о строковых значениях: в строках меток разрешены только символы, безопасные для URL. В целях безопасности вам следует закодировать URL-адресом все строки, содержащие символы, не входящие в набор символов 0-9a-zA-Z . Кодировщик URL-адресов можно найти в документации по визуализации Google .

Синтаксис

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

chdl — текст каждой серии для отображения в легенде.

< метка_серии_данных >
Текст для записей легенды. Каждая метка применяется к соответствующей серии в массиве chd . Используйте знак + для пробела. Если вы не укажете этот параметр, на диаграмме не будет легенды. Невозможно указать разрыв строки в метке. Легенда обычно расширяется, чтобы вместить текст легенды, а область диаграммы сжимается, чтобы вместить легенду.

chdlp — [ необязательно ] Положение легенды и порядок записей легенды. Вы можете указать <position> и/или <label_order> . Если вы укажете оба, разделите их чертой. Вы можете добавить «s» к любому значению, если хотите, чтобы пустые записи легенды в chdl были пропущены в легенде. Примеры: chdlp=bv , chdlp=r , chdlp=bv|r , chdlp=bvs|r

< опт_позиция >
[ Необязательно ] Указывает положение легенды на диаграмме. Чтобы указать дополнительное отступы между легендой и областью диаграммы или границей изображения, используйте параметр chma . Выберите одно из следующих значений:
  • b – Легенда внизу диаграммы, записи легенды расположены в горизонтальном ряду.
  • bv — легенда внизу диаграммы, записи легенды в вертикальном столбце.
  • t — Легенда вверху диаграммы, записи легенды расположены в горизонтальном ряду.
  • tv — Легенда вверху диаграммы, записи легенды в вертикальном столбце.
  • r — [ по умолчанию ] Легенда справа от диаграммы, записи легенды в вертикальном столбце.
  • l — легенда слева от диаграммы, записи легенды в вертикальном столбце.
<opt_label_order>
[ Необязательно ] Порядок отображения меток в легенде. Выберите одно из следующих значений:
  • l [ По умолчанию для вертикальных легенд ] Отображать метки в порядке, указанном в chdl .
  • r — отображать метки в порядке, обратном заданному chdl . Это полезно в составных гистограммах, чтобы показать легенду.
    в том же порядке, в котором появляются полосы.
  • a — [ По умолчанию для горизонтальных легенд ] Автоматическое упорядочение: примерно означает сортировку по длине, сначала самый короткий, измеряемый в блоках по 10 пикселей. Если два элемента имеют одинаковую длину (разделены на блоки по 10 пикселей), первым будет отображаться тот, который указан первым.
  • 0,1,2... — Пользовательский порядок меток. Это список индексов меток, отсчитываемых от нуля, из chdl , разделенных запятыми.

chdls — [ необязательно ] Задает цвет и размер шрифта текста легенды.

< цвет >
Цвет текста легенды в шестнадцатеричном формате RRGGBB .
< размер >
Размер пункта текста легенды.

Примеры

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

Два примера легенд. Укажите текст легенды в том же порядке, что и ряд данных.

Red, blue, and green line chart with matching legends

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

Venn diagram with two smaller circles enclosed by a larger circle


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

На первой диаграмме показаны записи горизонтальной легенды ( chdlp=t , макет по умолчанию — горизонтальный), а на второй — нижние записи вертикальной легенды ( chdlp=bv ).

Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

В этом примере показано изменение размера шрифта.

Venn diagram with two smaller circles enclosed by a larger circle
chdls=0000CC,14

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

Поля диаграммы chma [ Все диаграммы ]

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

Поля по умолчанию — это все, что осталось после расчета размера диаграммы. Это значение по умолчанию зависит от типа диаграммы. Указанные вами поля являются минимальным значением; если в области диаграммы остается место для полей, размер поля будет таким же, как и оставшееся; вы не можете сжимать поля меньше, чем требуется для любых легенд и надписей. Вот диаграмма, показывающая основные части диаграммы:

Поле диаграммы, область легенды и область диаграммы

Поля диаграммы включают метки осей и область легенды . Размер области легенды изменяется автоматически, чтобы точно соответствовать тексту, если только вы не укажете большую ширину с помощью chma , и в этом случае размер поля увеличится, сжимая область диаграммы меньше. Вы не можете обрезать легенду, указав слишком маленький размер, но можете заставить ее занимать больше места, чем необходимо.

Совет: Если в гистограмме столбцы имеют фиксированный размер (по умолчанию), ширину области диаграммы нельзя уменьшить. Вы должны указать меньший или изменяемый размер полосы с помощью chbh .

Синтаксис

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
< левое_поле >, < правое_поле >, < верхнее_поле >, < нижнее_поле >
Минимальный размер поля вокруг области диаграммы в пикселях. Увеличьте это значение, чтобы включить некоторые отступы, чтобы метки осей не сталкивались с границами диаграммы.
<opt_legend_width> , <opt_legend_height>
[ Необязательно ] Ширина поля вокруг легенды в пикселях. Используйте это, чтобы легенда не сталкивалась с областью диаграммы или краями изображения.

Примеры

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

В этом примере диаграмма имеет минимальное поле в 30 пикселей с каждой стороны. Поскольку ширина легенды диаграммы превышает 30 пикселей, поле справа устанавливается на ширину легенды диаграммы и отличается от других полей.

Метки осей находятся за пределами области графика и поэтому рисуются внутри поля.

Line chart with gray background and margins on each side.
chma=30,30,30,30

Чтобы добавить поле вокруг легенды, установите значение для параметров < opt_legend_width > и < opt_legend_height > .

В этом примере ширина легенды составляет примерно 60 пикселей. Если вы установите для < opt_legend_width > значение 80 пикселей, поле расширится до 20 пикселей за пределами легенды.

Line chart with gray background and margins on each side.
chma=20,20,20,30|80,20

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

Стили и метки осей [ линия, полоса, Google-o-meter, радар, рассеяние ]

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

Не на всех диаграммах по умолчанию отображаются линии осей. Вы можете точно указать, какие оси должна отображать ваша диаграмма, используя параметр chxt . На линиях оси по умолчанию не отображаются числа; вы должны указать ось в параметре chxt , чтобы отображать числа.

Вы можете выбрать, чтобы на ваших осях отображались числа, отражающие значения данных, или вы можете указать собственные оси. По умолчанию отображаются числовые значения в диапазоне от 0 до 100. Однако вы можете изменить этот диапазон с помощью chxr для отображения любого диапазона, а также стилизовать значения (например, для отображения символов валюты или десятичных знаков) с помощью chxs .

Если вы решите использовать пользовательские значения, например: «Пн, вторник, среда», вы можете использовать параметр chxl . Чтобы разместить эти метки в определенных местах вдоль оси, используйте параметр chxp .

Наконец, вы можете использовать параметры chxs и chxtc для указания цвета, размера, выравнивания и других свойств как пользовательских, так и числовых меток осей.

Примечание о строковых значениях: в строках меток разрешены только символы, безопасные для URL. В целях безопасности вам следует закодировать URL-адресом все строки, содержащие символы, не входящие в набор символов 0-9a-zA-Z . Кодировщик URL-адресов можно найти в документации по визуализации Google .

В этом разделе рассматриваются следующие темы:


Видимые оси chxt

Гистограммы, линейные, лепестковые и точечные диаграммы по умолчанию отображают одну или две оси, но эти линии не содержат значений. Чтобы отобразить значения на линиях осей или изменить отображаемые оси, вы должны использовать параметр chxt . По умолчанию значения осей находятся в диапазоне от 0 до 100, если вы не масштабируете их явно с помощью свойства chxr . Чтобы скрыть все линии осей на линейной диаграмме, укажите :nda после значения типа диаграммы в параметре cht (пример: cht= lc:nda ).

По умолчанию на верхней и нижней осях не отображаются деления значений, а на левой и правой осях они отображаются. Вы можете изменить это поведение, используя параметр chxs .

Синтаксис

chxt=
  <axis_1>
    ,...,
  <axis_n>
< ось >
Ось для отображения на диаграмме. Доступные оси:
  • x — нижняя ось X
  • t – верхняя ось X [ не поддерживается Google-o-Meter ]
  • y — левая ось Y
  • r — правая ось Y [ не поддерживается Google-o-Meter ]

Вы можете указать несколько осей одного типа, например: cht=x,x,y . Это объединит два набора осей X в нижней части диаграммы. Это полезно при добавлении пользовательских меток вдоль оси, отображающей числовые значения (см. пример ниже). Оси рисуются изнутри наружу, поэтому, если у вас есть x,x , первый x относится к самой внутренней копии, следующий x относится к следующей внешней копии и так далее.

Примеры

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

В этом примере показана линейная диаграмма с осями X, Y, верхней осью (t) и правой осью (r).

Поскольку метки не указаны, по умолчанию для диаграммы используется диапазон от 0 до 100 для всех осей.

Обратите внимание, что по умолчанию верхняя и нижняя оси не имеют меток рядом с метками.

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

Вы можете включить несколько наборов меток для каждой оси, включив одно и то же значение несколько раз. В этом примере показаны два набора осей x и два набора осей y. Это не особенно полезно при использовании только меток осей по умолчанию, как показано здесь. Но вы можете указать собственные метки для каждой копии каждой оси, используя параметр chxl .

chxt=x,x,y,y


chxt=x,x,y,y
chxl=
1:|Замерзание|Горячо|
3:|Низкий|Высокий

В этом примере показана горизонтальная гистограмма с осью X, осью Y, верхней осью T и правой осью R.

Метки осей опущены, поэтому API диаграмм отображает диапазон от 0 до 100 для оси X и для оси T.

Диапазон по оси Y и по оси R определяется количеством столбцов. В данном случае имеется пять столбцов, поэтому API диаграмм отображает диапазон от 0 до 4. Первая метка располагается по центру основания первого столбца, вторая метка — по центру основания второго столбца и т. д. .

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 above and below
chxt=x,y,r,t

Вы можете отключить оси по умолчанию в линейной диаграмме, указав :nda после типа диаграммы. Line chart with hidden axes
cht=lc:nda

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

Диапазон оси chxr

Вы можете указать диапазон значений, которые отображаются на каждой оси независимо, используя параметр chxr. Обратите внимание, что это не меняет масштаб элементов диаграммы, а только масштаб меток осей. Если вы хотите, чтобы номера осей описывали фактические значения данных, установите <start_val> и <end_val> в нижнее и верхнее значения диапазона вашего формата данных соответственно. См. «Масштабирование оси» для получения дополнительной информации.

Вы должны сделать ось видимой с помощью параметра chxt , если хотите указать ее диапазон.

Чтобы указать значения настраиваемой оси, используйте параметр chxl .

Синтаксис

Разделите диапазоны меток нескольких осей с помощью вертикальной черты ( | ).

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<индекс_оси >
К какой оси применять метки. Это индекс, начинающийся с нуля, в массиве осей, заданном chxt . Например, ось r будет равна 1 в chxt=x,r,y .
< начальное_значение >
Число, определяющее нижнее значение для этой оси.
< конечное_значение >
Число, определяющее максимальное значение для этой оси.
<opt_step>
[ Необязательно ] Шаг отсчета между делениями на оси. Не существует значения шага по умолчанию; шаг рассчитан так, чтобы попытаться показать набор хорошо расположенных меток.

Примеры

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

В этом примере показаны левая и правая оси Y ( y и r ) и одна ось X ( x ).

Каждая ось имеет определенный диапазон. Поскольку метки или позиции не указаны, значения берутся из заданного диапазона и равномерно распределяются внутри этого диапазона. На линейном графике значения равномерно распределены по оси X.

Направление оси меняется на противоположное для оси r (индекс 2 ), поскольку первое значение ( 1000 ) больше последнего значения ( 0 ).


chxt=x,y,r
chxr=
0,0,500|
1,0,200|
2,1000,0

В этом примере значения указаны для оси X.

Метки осей равномерно расположены вдоль оси. Для параметра <opt_step> указано значение пять ( 5 ).

Bar chart with 200, 300, and 400 on the x-axis chxt=x
chxr=0,10,50,5

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

Пользовательские метки осей chxl

Вы можете указать собственные метки строковых осей на любой оси, используя параметр chxl . Вы можете указать столько ярлыков, сколько захотите. Если вы отображаете ось (с помощью параметра chxt ) и не указываете пользовательские метки, будут применены стандартные числовые метки. Чтобы указать пользовательский числовой диапазон, используйте вместо этого параметр chxr .

Чтобы установить определенные местоположения на оси для ваших меток, используйте параметр chxp .

Синтаксис

Укажите один набор параметров для каждой оси, которую вы хотите пометить. Разделите несколько наборов меток с помощью вертикальной черты ( | ).

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<индекс_оси >
К какой оси применять метки. Это индекс массива параметров chxt . Например, если у вас есть chxt=x,x,y,y то индекс 0 будет первой осью X, а 1 — второй осью X.
<метка_1> | ... |< метка_n >
Одна или несколько меток, которые можно разместить вдоль этой оси. Это могут быть строковые или числовые значения; строки не обязательно должны быть в кавычках. label_1 отображается в самой нижней позиции на оси, а label_n отображается в самой высокой позиции. Дополнительные метки располагаются между ними равномерно. Пробелы обозначайте знаком +. Невозможно указать разрыв строки в метке. Отдельные метки с помощью вертикальной черты. Примечание. Не размещайте трубку после последней метки в параметре chxl .

Примеры

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

На этой диаграмме показано, как добавлять пользовательские метки к двум осям. Обратите внимание, что значения расположены равномерно и что последнее значение chxl не заканчивается вертикальной чертой.

Line chart with 0 and 100 on the left, A, B, and C on the right, Jan,July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

Этот пример включает метки осей на левой и правой осях Y ( y и r ). Он также включает два набора значений для оси X ( x ). Вы можете рассмотреть возможность добавления делений по оси Y с помощью chxs .

Line chart with 0 and 100 on the left, A, B, and C on the right, Jan,July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

Этот пример включает метки осей на левой и правой осях Y ( y и r ). Он также включает два набора значений для оси X ( x ). Обратите внимание на пустые метки для нижнего набора осей X, используемые для разделения значений.

В этом примере используются значения по умолчанию для меток оси на левой оси Y.

Bar chart with 0 and 100 on the left, A, B, and C on the right, Jan, July,Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

Если вы хотите добавить общую метку для описания всей оси (например, чтобы пометить одну ось «стоимость», а другую — «студент»), используйте свойство chxt , чтобы добавить дополнительную ось с каждой стороны, а затем используйте chxl , чтобы добавить по одной настраиваемой метке с каждой стороны и chxp , чтобы разместить ее посередине оси.


chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

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

Позиции меток осей chxp

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

Синтаксис

Разделите несколько наборов позиционирования с помощью вертикальной черты ( | ).

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<индекс_оси >
Ось, для которой вы указываете позиции. Это индекс массива параметров chxt . Например, если у вас есть chxt=x,x,y,y то индекс 0 будет первой осью X, 1 — второй осью X и так далее.
< label_1_position >,...,< label_n_position >
Положение метки вдоль оси. Это список числовых значений, разделенных запятыми, где каждое значение задает положение соответствующей метки в массиве chxl : первая запись применяется к первой метке и так далее. Позиция — это значение в диапазоне для этой оси . Обратите внимание, что это всегда будет значение от 0 до 100, если вы не указали собственный диапазон с помощью chxr . У вас должно быть столько позиций, сколько меток для этой оси.

Примеры

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

Этот пример включает метки оси R в указанных позициях на диаграмме. Текст метки задается с помощью параметра chxl .

Метки с указанной позицией 0 размещаются внизу оси Y или R или слева от оси X или T.

Метки с указанной позицией 100 размещаются вверху оси Y или R или справа от оси X или T.

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

В этом примере показано отображение значений меток по умолчанию, но только в указанных местах.

chxp=1,10,35,75 — на оси Y должно отображаться только три метки: 10, 35 и 75. Поскольку текст пользовательской метки не указан, отображаются значения этих осей. Обратите внимание, что вам не нужно равномерно распределять метки при использовании chxp . Если бы здесь не был указан chxp , расстояние до значения метки по умолчанию по оси Y составляло бы каждые 20 единиц, как показано на втором графике.

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

Line chart with default axis positions.
chxt=x,y
chxp не указан

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

Стили меток осей chxs

Вы можете указать размер, цвет и выравнивание шрифта для меток осей, как для пользовательских меток, так и для значений меток по умолчанию. Все метки на одной оси имеют одинаковый формат. Если у вас есть несколько копий оси, вы можете отформатировать каждую из них по-разному. Вы также можете указать формат строки метки, например, чтобы отображать символы валюты или конечные нули.

По умолчанию на верхней и нижней осях не отображаются деления значений, а на левой и правой осях они отображаются.

Синтаксис

Значения для нескольких осей следует разделять с помощью вертикальной черты ( | ).

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
< индекс_оси >
Ось, к которой это относится. Это индекс, отсчитываемый от нуля, в параметре chxt .
< строка_опт_формата >
[ Необязательно ] Это необязательная строка формата, которая, если она используется, следует сразу после номера индекса оси без промежуточной запятой. Он начинается с буквы N, за которой следуют следующие значения (все необязательные): Синтаксис строки форматирования следующий:
N< preceding_text >*< number_type >< decimal_places >zs< x or y >*< following_text >
Вот значение каждого элемента:
  • <preceding_text> — буквенный текст, предшествующий каждому значению.
  • *...* — необязательный блок, заключенный в буквенные звездочки, в котором можно указать детали форматирования чисел. Следующие значения поддерживаются и являются необязательными:
    • <number_type> — числовой формат для числовых значений. Выберите один из следующих вариантов:
      • f - [ По умолчанию ] Формат с плавающей запятой. Рассмотрите также возможность указать точность с помощью значения < decimal_places >.
      • p — процентный формат. Знак % добавляется автоматически. Примечание. При использовании этого формата значения данных от 0,0 до 1,0 преобразуются в значения от 0 до 100 % (например, 0,43 будет отображаться как 43 %).
      • e - Формат научной записи.
      • c< CUR > — форматирует число в указанной валюте с соответствующим маркером валюты. Замените < CUR > трехбуквенным кодом валюты. Пример: cEUR для евро. Список кодов можно найти на веб-сайте ISO , хотя поддерживаются не все символы.
    • <decimal_places> — целое число, определяющее количество отображаемых десятичных знаков. Значение округляется (не усекается) до этой длины. По умолчанию — 2.
    • z — отображать конечные нули. По умолчанию нет .
    • s — Отобразить разделители групп. По умолчанию нет .
    • x или y — отображение данных по координатам x или y, как указано. Значение данных x зависит от типа диаграммы: поэкспериментируйте с диаграммой, чтобы определить, что они означают. По умолчанию — «y» .
  • < following_text > — буквенный текст, следующий за каждым значением.
<opt_label_color>
Цвет, применяемый к тексту оси (но не к линии оси) в шестнадцатеричном формате RRGGBB . Цвет линии оси указывается отдельно с помощью opt_axis_color . По умолчанию серый.
< opt_font_size >
[ Необязательно ] указывает размер шрифта в пикселях. Этот параметр является необязательным.
<opt_alignment>
[ Необязательно ] Выравнивание меток. Для верхней или нижней оси это описывает, как метка выравнивается по отметке над или под ней; для левой или правой осей это описывает, как выравнивается внутри ограничивающей рамки, которая касается оси. Укажите одно из следующих чисел:
  • -1Сверху или снизу : метки располагаются справа от галочек; Влево или вправо : метки в своей области выравниваются по левому краю. По умолчанию для меток оси R.
  • 0сверху или снизу : метки центрируются по меткам; Слева или справа : метки центрируются в своей области. По умолчанию для меток осей X и T.
  • 1 — Сверху или снизу : метки располагаются слева от галочек; Слева или справа : метки выравниваются по правому краю своей области. По умолчанию для меток оси Y.
< opt_axis_or_tick >
[ Необязательно; не поддерживается в Google-o-meter ] Показывать ли отметки и/или линии оси для этой оси. Засечки и оси доступны только для самых внутренних осей (например, они не поддерживаются для внешних из двух осей X). Используйте одно из следующих значений:
  • l (строчная буква «L») — рисовать только линию оси.
  • t — рисовать только деления. Засечки — это маленькие линии рядом с метками осей.
  • lt - [ По умолчанию ] Нарисуйте линию оси и отметки для всех меток.
  • _ - (подчеркивание) Не рисовать ни линию оси, ни деления. Если вы хотите скрыть линию оси, используйте это значение.
< цвет_галочки >
[ Необязательно ; не поддерживается в Google-o-meter ] Цвет отметки в шестнадцатеричном формате RRGGBB . По умолчанию серый.
<opt_axis_color>
[ Необязательно ] Цвет линии этой оси в шестнадцатеричном формате RRGGBB . По умолчанию серый.

Примеры

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

Размер и цвет шрифта указаны для второй оси X (январь, февраль, март).

Line chart with min, average, and max on the left, 0, 1, 2, 3, and 4 on the right, 0 to 100 along the x-axis and Jan, Feb, and Mar in blue below

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

Размер, цвет и выравнивание шрифта указаны для правой оси Y. Отрисовываются деления, но не линия оси.

Line chart with 0 to 100 along the x-axis, Jan, Feb, Mar below, 0 to 4 on the y-axis, and red tickmarks with blue text for min, average and max on the right.

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

Эта диаграмма включает три набора данных и показывает три набора меток осей, по одному на серию. Каждый набор меток форматируется с использованием пользовательской строки форматирования, как описано здесь:

  • 0N*e,000000|
    • 0 означает первую серию данных
    • N означает строку форматирования
    • * означает начало спецификаторов формата
    • e означает научную запись
    • * означает конец спецификаторов формата
    • 000000 означает черный текст.
  • 1N*cUSD*Mil,FF0000|
    • 1 означает вторую серию
    • N означает строку форматирования
    • * означает начало спецификаторов формата
    • c означает валютный маркер
    • USD указывает доллар США в качестве используемого валютного маркера.
    • * означает конец спецификаторов формата
    • Mil — это буквальная следующая строка
    • FF0000 означает красный текст.
  • 2N*sz2*,0000FF
    • 2 означает третью серию
    • N означает строку форматирования
    • * означает начало спецификаторов формата
    • s означает отображение спецификаторов группировки (в английском языке (США) это запятая через каждые три нуля)
    • z2 означает отображение двух конечных нулей
    • 0000FF означает синий текст.

Диапазоны меток осей задаются с помощью параметра chxr ( axis_index , start , end , Step ). Если бы они не были установлены, по умолчанию они были бы от 0 до 100.


chd=s:
984sttvuvkQIBLKNCAIi,
DEJPgq0uov17zwopQODS,
AFLPTXaflptx159gsDrn
chxr=
0,0,1000000,250000|
1,0,60|
2,0,5000
chxs=
0N*e,000000|
1N*cUSD*Mil,FF0000|
2N*sz2*,0000FF

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

Стили деления оси chxtc

Вы можете указать длинные деления для определенных осей. Обычно это используется для продления деления по всей длине диаграммы. Используйте параметр chxs , чтобы изменить цвет деления.

Значения для нескольких осей следует разделять с помощью вертикальной черты ( | ). Значения внутри серии должны быть разделены запятой.

Синтаксис

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
< индекс_оси >
Ось, к которой это относится. Это индекс, отсчитываемый от нуля, в параметре chxt . Отдельные значения для разных осей с помощью разделителя.
< длина_тикания_1 >,...,< длина_тикания_n >
Длина делений на этой оси в пикселях. Если задано одно значение, оно будет применяться ко всем значениям; если задано более одного значения, деления оси будут циклически перемещаться по списку значений для этой оси. Положительные значения выводятся за пределы области диаграммы и обрезаются по границам диаграммы. Максимальное положительное значение — 25. Отрицательные значения отображаются внутри области диаграммы и обрезаются по границам области диаграммы.

Примеры

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

Пример использования chxtc для создания длинных красных делений. Длина деления здесь превышает ширину области диаграммы, но обрезается по размеру диаграммы.

  • chxt=x,y,r,x — показать левую ось, правую ось и две нижние оси.
  • chxl =2:|min|average|max|3:|Jan|Feb|Mar — текст метки, присвоенный 'r' (правая сторона) и внешней оси X.
  • chxp =2,10,35,95 — пользовательские положения меток по оси r (индекс = 2) для трех меток.
  • chxs=2,0000dd,13,-1,t,FF0000 — стили меток оси для оси r: цвет текста, размер текста, выравнивание по левому краю, с красными делениями.
  • chxtc=1,10|2,-180 — длина деления по осям y и r. Первое значение указывает отметки длиной 10 пикселей за пределами оси. Второе значение определяет отметки длиной 180 пикселей внутри оси; отрицательное число означает, что отметка находится внутри оси и обрезается, чтобы поместиться внутри диаграммы.

Line chart with 0 to 100 along the x-axis, Jan, Feb, Mar below, 0 to 4 on the y-axis, and long red tickmarks with blue text for min, average and max on the right.

chxt=x,y,r,x
chxl=
2:|min|average|max|
3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180

Этот график демонстрирует переменную длину тиков. chxtc задает два значения длины деления по оси Y (5 и 15), и отметки, нарисованные на диаграмме, чередуются между двумя значениями.
chxt=x,y
chxtc=
1,5,15

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

Фоновые заливки chf [ Все графики ]

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

Сплошные заливки chf [ Все графики ]

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

Синтаксис

chf=<fill_type>,s,<color>|...
< тип_заполнения >
Заполняемая часть диаграммы. Укажите одно из следующих значений:
  • bg — заливка фона
  • c - Заливка области диаграммы. Не поддерживается для картографических диаграмм.
  • a . Сделайте всю диаграмму (включая фон) прозрачной. Первые шесть цифр < color > игнорируются, и только последние две (значение прозрачности) применяются ко всей диаграмме и всем заливкам.
  • b <index> — столбчатая сплошная заливка (только гистограммы). Замените <index> индексом серии столбцов, чтобы залить их сплошным цветом. Эффект аналогичен указанию chco на гистограмме. Пример см. в разделе «Цвета серии гистограмм» .
с
Указывает сплошную или прозрачную заливку.
< цвет >
Цвет заливки в шестнадцатеричном формате RRGGBB . Для прозрачных пленок первые шесть цифр игнорируются, но их все равно необходимо включить.

Примеры

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

В этом примере фон диаграммы заливается бледно-серым цветом ( EFEFEF ).

Red line chart with black area fill.

chf=bg,s,EFEFEF

В этом примере фон диаграммы заливается бледно-серым цветом ( EFEFEF ), а область диаграммы заливается черным ( 000000 ).

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

chf=c,s,000000|
bg,s,EFEFEF

В этом примере ко всей диаграмме применяется прозрачность 50 % (80 в шестнадцатеричном формате равно 128, или прозрачность около 50 %). Обратите внимание на фон ячейки таблицы, просвечивающий через диаграмму.

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

chf=a,s,00000080

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

Градиентная заливка chf [ Линия, Столбец, Google-o-meter, Радар, Разброс, Венн ]

К областям диаграммы или фону можно применить одну или несколько градиентных заливок. Градиентная заливка — это переход от одного цвета к другому. (Круговые диаграммы Google-o-meter: только фон.)

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

Синтаксис

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

Примеры

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

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

Цвета: персиковый ( FFE7C6 ), центрированный слева (позиция 0.0 ), и синий ( 76A4FB ), центрированный справа (позиция 1.0 ).

Фон диаграммы нарисован серым цветом ( EFEFEF ).

Dark gray line chart with pale gray background and chart area in a white to blue linear gradient from left to right

chf=
c,lg,0,
FFE7C6,0,
(персик)
76A4FB,1
(синий)

Область диаграммы имеет диагональный линейный градиент (слева направо вверх), заданный углом в сорок пять градусов ( 45 ).

Персиковый ( FFE7C6 ) — первый указанный цвет. Левый нижний угол диаграммы — чисто персиковый.

Синий ( 6A4FB ) — второй указанный цвет. Правая верхняя часть диаграммы окрашена в чистый синий цвет. Обратите внимание, как мы указываем смещение 0,75, чтобы обеспечить пик синего цвета, который исчезает к верхнему правому углу.

Фон диаграммы нарисован серым цветом ( EFEFEF ).

Dark gray line chart with pale gray background and chart area in a white to blue diagonal linear gradient from bottom left to top right

chf=
c,lg,45,
FFE7C6,0,
(персик)
76A4FB,0.75
(синий)

Область диаграммы имеет вертикальный (сверху вниз) линейный градиент, заданный с углом девяносто градусов ( 90 ).

Синий ( 76A4FB ) — это первый указанный цвет. Верхняя часть диаграммы чисто синего цвета.

Персиковый ( FFE7C6 ) — второй указанный цвет. Нижняя часть диаграммы чисто персиковая.

Фон диаграммы нарисован серым цветом ( EFEFEF ).

Dark gray line chart with pale gray background and chart area in a white to blue vertical linear gradient from bottom to top

chf=
c,lg,90,
FFE7C6,0,
(персик)
76A4FB,0.5
(синий)

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

Полосатая заливка chf [ Линия, Бар, Гугл-о-метр, Радар, Разброс, Венн ]

Вы можете указать полосатую фоновую заливку для области диаграммы или всей диаграммы. (Круговые диаграммы Google-o-meter: только фон.)

Синтаксис

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
< тип_заполнения >
Область диаграммы для заполнения. Одно из следующих:
  • bg — заливка фона
  • c - Заполнение области диаграммы
  • b <index> — полосатая заливка (только гистограммы). Замените <index> индексом серии столбцов, которые будут заполнены полосами. Пример см. в разделе «Цвета серии гистограмм» .
лс
Задает заливку линейными полосами.
< угол >
Угол всех полос относительно оси Y. Используйте 0 для вертикальных полос или 90 для горизонтальных полос.
< цвет >
Цвет этой полосы в шестнадцатеричном формате RRGGBB . Повторите < цвет > и < ширину > для каждой дополнительной полосы. У вас должно быть как минимум две полоски. Полосы чередуются, пока диаграмма не заполнится.
< ширина >
Ширина этой полосы от 0 до 1 , где 1 — полная ширина диаграммы. Полосы повторяются до тех пор, пока диаграмма не заполнится. Повторите < цвет > и < ширину > для каждой дополнительной полосы. У вас должно быть как минимум две полоски. Полосы чередуются, пока диаграмма не заполнится.

Примеры

Описание Пример
  • bg,ls,0 — фоновая полоса заполняется полосами под углом 0 градусов к оси Y (параллельно оси Y). Полосы заполняют фон диаграммы, а также область графика.
  • CCCCCC,0.15 — первая полоса темно-серого цвета, ее ширина составляет 15 % ширины диаграммы.
  • FFFFFF,0.1 — вторая полоса белая, ее ширина составляет 10 % ширины диаграммы.
Blue line chart with alternating gray and white stripes from left to right
chf=
bg,ls,0,
CCCCCC,0.15,
FFFFFF,0.1
  • c,ls,90 — область диаграммы с горизонтальными полосами под углом девяносто градусов от оси Y. Полосы заполняют область графика, но фон диаграммы отсутствует.
  • 999999,0.25 — Первая полоса темно-серая, ее ширина составляет 25% ширины диаграммы.
  • CCCCCC,0.25 — То же, что и первая полоса, но более светло-серого цвета.
  • FFFFFF,0.25 — То же, что и первая полоса, но белого цвета.
Blue line chart with a dark gray, pale gray, white and dark gray stripes from bottom to top
chf=
c,ls,90,
999999,0.25,
CCCCCC,0.25,
FFFFFF,0.25

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

Линии сетки chg [ Линия, Столбец, Радар, Разброс ]

Вы можете указать на диаграмме сплошные или пунктирные линии сетки, используя параметр chg .

Этот параметр не позволяет указать толщину или цвет линий. Дополнительные способы создания линий на диаграмме см. в разделе маркеры формы ( chm типа h, H, v или V), маркеры диапазона ( chm ) и деления осей ( chxtc ).

Синтаксис

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>
<x_axis_step_size> , <y_axis_step_size>
Используется для расчета количества линий сетки x или y для отображения на диаграмме. 100/step_size = количество линий сетки на диаграмме. Итак: 20,25 будет означать 5 вертикальных линий сетки и 4 горизонтальных линии сетки.
<opt_dash_length> , <opt_space_length>
[ Необязательно ] Используется для определения пунктирных линий сетки. Первый параметр — это длина каждого штриха линии в пикселях. Второй параметр — расстояние между черточками в пикселях. Укажите 0 для <opt_space_length> для сплошной линии. Значения по умолчанию: 4,1.
< opt_x_offset >,< opt_y_offset >
[ Необязательно ] Число единиц в соответствии с масштабом диаграммы для смещения линий сетки x и y соответственно. Могут иметь положительные или отрицательные значения. Если вы укажете это значение, вы также должны указать все предыдущие значения. Значения по умолчанию: 0,0.

Примеры

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

В этих примерах используются только параметры < x_axis_step_size > и < y_axis_step_size > . API диаграмм по умолчанию отображает пунктирную линию сетки.

Line chart with 5 vertical and two horizontal pale gray dashed grid lines
chg=20,50
Line chart with 5 vertical and two horizontal pale gray dashed grid lines
chg=20,50

В этом примере используются большие пространства для отображения более светлых линий сетки ( 1,5 ).

Line chart with 5 vertical and two horizontal faint, pale gray, dashed grid lines
chg=20,50,1,5

Чтобы отобразить сплошные линии сетки, укажите ноль ( 0 ) для параметра < opt_space_length > .

На этой диаграмме также указано смещение по оси X, равное 10.

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,1,0,10

На этой диаграмме показано смещение по оси X, равное 10, и смещение оси Y, равное 20.

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,3,3,10,20

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

Стили линий chls [ Линия, Радар ]

Вы можете указать толщину линии и стиль сплошной/пунктирной линии с помощью параметра chls . Этот параметр можно использовать только для оформления линий на линейных или радиолокационных диаграммах; вы не можете использовать его для стилизации линии в линиях составной диаграммы, если базовый тип составной диаграммы не является линейной диаграммой.

Синтаксис

Разделяйте несколько стилей линий символом вертикальной черты ( | ); первый стиль применяется к первой строке, второй — к следующей и так далее. Если стилей меньше, чем строк, стиль по умолчанию применяется ко всем неуказанным линиям.

chls=
  <line_1_thickness>,<opt_dash_length>,<opt_space_length>
    |...|
  <line_n_thickness>,<opt_dash_length>,<opt_space_length>
< line_1_thickness >
Толщина линии в пикселях.
<opt_dash_length> , <opt_space_length>
[ Необязательно ] Используется для определения пунктирных линий сетки. Первый параметр — это длина каждого штриха линии в пикселях. Второй параметр — расстояние между черточками в пикселях. Для сплошной линии не указывайте ни одно значение. Если вы укажете только <opt_dash_length> , то для <opt_space_length> будет установлено значение <opt_dash_length> . По умолчанию — 1,0 (сплошная линия ).

Примеры

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

Здесь пунктирная линия обозначена цифрами 3,6,3 , а более толстая сплошная линия — цифрами 5 ..

Line chart with one solid line and one dashed line
chls=3,6,3|5

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

Динамические значки chem ( полоса, линия, радар, разброс )

Создайте диаграмму и укажите один или несколько динамических значков в качестве химических значений. Синтаксис chem следующий. Все элементы, разделенные точкой с запятой и выделенные фиолетовым цветом, являются необязательными, и любой из них можно полностью опустить в URL-адресе. Вы можете включить несколько маркеров, включив несколько синтаксических строк, разделенных | характер. Подробнее о динамических значках можно прочитать на странице динамических значков .

Вы также можете встроить диаграмму в другую диаграмму в виде динамического значка. См. подраздел «Встроенные диаграммы» ниже.

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
|...| y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
s=< icon_string_constant >
Константа строкового маркера для динамического значка со страницы динамических значков . Эта константа почти такая же, как параметр chst для отдельно стоящих значков. Но если строка отдельно стоящего значка начинается с «d_», вам следует удалить этот префикс, чтобы получить эквивалентный динамический маркер значка. Пример: отдельно стоящий значок: d_bubble_icon_text_small ; эквивалентный маркер динамического значка: bubble_icon_text_small .
d=< строка_данных_маркера >
Данные, необходимые для этого конкретного типа маркера. Здесь содержится та же строка, которая использовалась бы в параметре chld для эквивалентного отдельно стоящего значка, за исключением того, что все | разделители следует заменить запятыми (не забудьте использовать запятые вместо маркеров вертикальной черты для многострочного текста!). Обратите внимание, что в строке данных необходимо также экранировать следующие символы знаком @: труба ( | ), at ( @ ), равно ( = ), запятая ( , ), точка с запятой ( ; ). Примеры: hello@,+world , 5@@10+cents+each .
ds=< какая_серия >
[ Необязательно ] Отсчитываемый от нуля индекс ряда данных, к которому принадлежит этот маркер. Значение по умолчанию — 0.
dp=< какие_точки >
[ Необязательно ] Указывает, какие точки данных используются для рисования маркеров. Значение по умолчанию — 0 (первая точка в серии) . Используйте один из следующих форматов:
  • nd — на какой точке данных рисовать маркер, где nd — индекс в ряду, отсчитываемый от нуля. Если вы укажете нецелое значение, то дробь указывает на рассчитанную промежуточную точку. Например, 3,5 означает середину между точкой 3 и точкой 4.
  • range,< start >,< end >,< step > — нарисуйте маркер на каждой точке данных шага в диапазоне от начала до конца включительно. начало и конец являются индексными значениями и могут быть числами с плавающей запятой для обозначения промежуточных значений. Все значения являются необязательными; значения по умолчанию: начало=0, конец=последний элемент, шаг=1. Если вы пропустите значение, вы все равно должны включить все промежуточные запятые, но не обязательно включать пустые конечные запятые. Примеры: dp=range,0,4 рисует маркер на элементах от 0 до 4; dp=range,5,10,2 рисует маркер на элементах 5, 7 и 9; dp=range,2 рисует точки на третьей точке и позже; dp=range,3,,1.5 рисует маркеры на каждых 1,5 точках данных от четвертого элемента до последнего.
  • all — Нарисуйте маркер на каждом элементе. Это эквивалентно range,0, end_index . Пример: dp=all
  • every,n — нарисовать маркер на каждом n- м маркере. Пример: dp=every,2 рисует маркер на элементах 0, 2 и 4.
py=< z_order >
[ Необязательно ] Слой, на котором будет рисоваться маркер, по сравнению с другими маркерами и всеми остальными элементами диаграммы. Это число с плавающей запятой от -1,0 до 1,0 включительно, где -1,0 — низ, а 1,0 — верх. Элементы диаграммы (линии и столбцы) находятся чуть ниже нуля. Если два маркера имеют одинаковое значение, они отображаются в порядке, заданном URL-адресом. Значение по умолчанию — 0,0 (чуть выше элементов диаграммы).
po=< x,y >
[ Необязательно ] Абсолютная позиция на графике, в которой следует рисовать маркер. x и y — два числа с плавающей запятой, где 0.0,0.0 — нижний левый угол, а 1.0,1.0 — верхний правый угол.
of=< x_offset,y_offset >
[ Необязательно ] Число пикселей для смещения значка от его нормального положения. x_offset и y_offset — положительные или отрицательные целые числа. Важно указать это значение во встроенном динамическом значке, поскольку маркер будет центрирован по вертикали и горизонтали над точкой, а это означает, что точка, вероятно, не будет совпадать с маркером данных. Хорошее смещение для вертикального штифта of=0,22 ; Хорошее смещение для наклонного штифта составляет либо of=-12,20 , либо of=12,20 в зависимости от направления наклона, но вам, возможно, придется поэкспериментировать. Значение по умолчанию — 0,0.

Примеры

Описание Пример
Вот примеры одного и того же динамического значка, созданного в виде отдельного изображения и используемого в качестве маркера на линейной диаграмме.

Диаграмма 1: https://chart.googleapis.com/chart?chs=300x140&cht=lc&chco=FF9900,224499&
chd=t:75,74,66,30,10,5,3,1&chls=1|1&
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0&chm=v,ccccFF,0,::.2,2

Диаграмма 2: https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

Line chart with dynamic icon marker.
chem=
y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0


Same dynamic icon marker as standalone image.


chst=
d_bubble_icon_text_small
chld=
ski|bb|Wheeee!|FFFFFF|000000

Обратите внимание, что маркер динамического значка будет центрирован в точке по горизонтали и вертикали. Поэтому, если вы используете динамический значок с хвостом, хвост не будет находиться в точке графика; центр маркера будет. На первом графике отметка центрируется на точке данных 3, что фактически помещает хвост немного правее отметки на линии.

На второй диаграмме значение of используется для перемещения хвоста маркера поверх нужной точки данных. Хорошее смещение для наклонного штифта составляет -12,20.


chem=y;
s=map_xpin_letter;
d=pin_sleft,A,FF0000;
dp=3;
ds=1



chem=y;
s=map_xpin_letter;
d=pin_sleft,A,FF0000;
dp=3;
ds=1;
of=-12,0

Чтобы включить несколько динамических значков, повторите синтаксическую строку, разделенную | характер.

В этом примере показан диапазон, а также два отдельных маркера.

Обратите внимание, что вертикальные штифты смещены на 0,22, а наклонные штифты имеют смещение на 12,20, чтобы точки штифтов совпадали с описываемой ими серией.


chem=
y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|
y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|
y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
Это демонстрирует многострочный текстовый маркер. Маркер должен быть смещен после добавления текста, поскольку размер пузырька изменяется в соответствии с текстом, что приводит к его повторному центрированию на диаграмме. Обратите внимание, что новые строки в тексте обозначаются запятыми в строке данных d .
chem=y;
s=bubble_texts_big;
d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;
ds=0;
dp=13;
of=-120,2

Встроенные диаграммы

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

Существует два стиля встроенных маркеров диаграммы: встроенные диаграммы в пузырьке и встроенные диаграммы без пузырька. Вот примеры того и другого:

Bubble-less chart
Диаграмма с пузырьком
Диаграмма без пузырька

Вот особенности параметров s=< icon_string_constant >;d=< marker_data_string > как для непузырьковых, так и для пузырьковых диаграмм (параметры, описанные выше, здесь повторно не описываются):

Синтаксис

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>
выравнивание_строка
[ Только без пузырьков ] Какая часть встроенной диаграммы без пузырьков закреплена за точкой данных. Выберите одну из двухбуквенных строковых констант на следующей диаграмме: Строки выравнивания
диаграмма_данных
Данные для встроенной диаграммы. Это все после https://chart.googleapis.com/chart? в URL-адресе диаграммы для встраивания. Используйте инструмент ниже или следуйте правилам, перечисленным под ним.
тип_фрейма
[ Только пузырь ] Одна из констант стиля динамической рамки значка.
прокладка
[ Только пузырьки ] Отступы внутри пузырька в пикселях.
цвет_рамки
[ Только пузырьковый цвет ] Цвет рамки в виде шестизначной цветовой строки HTML без знака #. Пример: FF00FF .
Цвет заливки
[ Только пузырьковый цвет ] Цвет пузырьковой заливки в виде шестизначной цветовой строки HTML без знака #. Пример: FF00FF .

Встроенные данные диаграммы

Используйте следующий инструмент преобразования, чтобы сгенерировать строку диаграммы, или сгенерируйте строку диаграммы вручную, следуя правилам, указанным после инструмента.

Правила ручного преобразования

1. Сначала замените все следующие символы в парах параметра и значения следующими значениями в указанном порядке:

Заменять С этим
%7C или %7c
|
@
@@
%
%25
,
@,
|
@|
;
@;
&
%26
"="
%3D

2. Затем замените все значения & и = в парах parameter1=value1&parameter2=value2... запятыми.

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

Линия заполняет chm [ Линия, Радар ]

Вы можете заполнить область под линией данных сплошным цветом.

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

Синтаксис

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
< б_или_Б >
Заполнять ли до низа диаграммы или только до следующей нижней строки.
  • B — Заполните от < start_line_index > до нижней части диаграммы. < end_line_index > поддерживает специальный синтаксис, позволяющий заполнить сегмент диаграммы. Это проще всего, если у вас есть диаграмма с одной линией, которую вы хотите заполнить.
  • б — Заполнение между двумя строками многолинейной диаграммы. Начальная и конечная линии обозначаются < start_line_index > и < end_line_index > .
< цвет >
Шестнадцатеричное число цвета заливки в формате RRGGBB .
< индекс_начальной_строки >
Индекс строки, с которой начинается заливка. Первая серия данных, указанная в chd , имеет нулевой индекс ( 0 ), вторая серия данных имеет индекс 1 и т. д.
< конечный_индекс_строки >
  • Тип заполнения «b» — линия, на которой следует остановить заполнение. Эта линия должна находиться ниже текущей линии.
  • Тип заполнения «B» — один из следующих вариантов:
    • any value - Any single number in this parameter is ignored, and the fill will go from the specified line to the base of the chart
    • start:end - To fill a vertical slice below the chart, specify start:end , where these are data point indices describing where to start and stop the fill. Both values are optional, and default to first_point : last_point . (See example below.)
<0>
Reserved — must be zero.

Примеры

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

For a single series, it is simplest to use chm=B . This fills the entire area under the line.

This is the only fill area type available for radar charts. chm=b does not work with radar charts.


chm=B,76A4FB,0,0,0

Here's a chart with two lines and two fills. Filling the area below the bottom line and above the top line requires a special technique, covered next.


chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0| (blue)
b,FF0000,1,2,0| (red)

In a multi-line chart, to fill from the top of the chart to the first line, include a series that contains two copies of the highest data value for the data format. So, for example, " .... " for extended encoding, " 100,100 " for basic text format, and so on. Fill from this series to the topmost line.

To fill from the last line to the bottom of the chart, include a series that contains two copies of the lowest data value for the data format. So, for example, AAAA for extended encoding, 0,0 for basic text format, and so on.

The lines themselves are drawn in black, using chco .

Three lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart
chd=e:
....,
(highest value)
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,
AAAA
(zero value)
chm=
b,76A4FB,0,1,0|
(light blue)
b,224499,1,2,0| (blue)
b,FF0000,2,3,0| (red)
b,80C65A,3,4,0 (green)
chco=000000

Here is a line chart with vertical fill slices. This is accomplished by specifying a start : end pair for < end_line_index > with line fill type 'B'.

  • B,76A4FB,0,0:3,0 - Blue vertical fill under line 0, bound by data points 0—3.
  • B,990000,0,7:10,0 - Red vertical fill under line 0, bound by data points 7—10.
  • B,DEDC06,0,12:,0 - Yellow vertical fill under line 0, from data point 12 through the end of the series.

chm=
B,76A4FB,0,0:3,0|
B,990000,0,7:10,0|
B,DEDC06,0,12:,0

This example shows using a line fill on a radar chart.

Radar chart
chm=
B,FF000080,0,1.0,5.0|
B,FF990080,1,1.0,5.0

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

Shape Markers chm [ Bar, Line, Radar, Scatter ]

You can specify graphical markers for all or individual data points on a chart. If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. You can also create text markers on data points, which is covered in Data Point Markers .

You can combine shape markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Синтаксис

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

Shape markers behave slightly differently in scatter charts . See that documentation for more information.

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[ Optional ] If you precede the marker type with the optional @ character, then < opt_which_points > should use the x:y format.
<marker_type>
The type of marker to use. Specify one of the following types:
  • a - Arrow
  • c - Cross
  • C - Rectangle. If a rectangle marker, you must have at least two data series, where series 0 specifies the bottom edge and series 1 specifies the top edge. < size > specifies the width of the rectangle, in pixels.
  • d - Diamond
  • E - Error-bar marker ( ) This marker requires two data series to create, one value for the bottom, and the corresponding point in the second series for the top. It also exposes an extended < size > syntax: line_thickness [: top_and_bottom_width ] where top_and_bottom_width is optional. See the examples below.
  • h - Horizontal line across the chart at a specified height. ( The only valid format for < opt_which_points > parameter is nd . )
  • H - Horizontal line through the specified data marker. This supports an extended < size > syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area width.
  • o - Circle
  • s - Square
  • v - Vertical line from the x-axis to the data point
  • V - Vertical line of adjustable length. This supports an extended < size > value syntax that lets you specify an exact line length: line_thickness [: length ] where : length is optional, and defaults to the full chart area height. The marker is centered on the data point.
  • x - An X
< цвет >
The color of the markers for this series, in RRGGBB hexadecimal format .
< series_index >
The zero-based index of the data series on which to draw the markers. Ignored for h markers and markers that specify location by x/y position (start with the @ character). You can use hidden data series as a source for markers; see Compound Charts for more information. Grouped vertical bar charts support a special extended syntax to align markers with specific bars.
< opt_which_points >
[ Optional ] Which point(s) to draw markers on. Default is all markers. Используйте одно из следующих значений:
  • nd - Where to draw the marker. The meaning depends on the marker type:
    • All types except h - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
    • h - A number from 0.0 to 1.0, where 0.0 is the bottom of the chart, and 1.0 is the top of the chart.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • - n - Draw a marker on every n -th data point. Floating point value; if n is less than 1 the chart will calculate additional intermediary points for you. For example, -0.5 will put twice as many markers as data points.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x : y - Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the @ character before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15 .
< размер >
The size of the marker, in pixels. Most take a single number value for this parameter; the V, H, and S markers support the syntax < size >[: width ] where the optional second part specifies the line or marker length.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
< opt_offset >
[ Optional ] Let you specify horizontal and vertical offsets from the specified location. Here is the syntax, which uses a : delimiter: reserved :< horizontal_offset >:< vertical_offset > . If specified, you can include an empty ,, value in the chm parameter string for < opt_z_order >. Examples: o,FF9900,0,4,12,, :10 o,FF9900,0,4,12.0,, :-10:20 o,FF9900,0,4,12,1, ::20
  • reserved - Leave blank.
  • < horizontal_offset > - A positive or negative number specifying the horizontal offset, in pixels. Optional; leave blank if not used.
  • < vertical_offset > - A positive or negative number specifying the vertical offset, in pixels. Optional; leave blank if not used.

Примеры

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

Here's an example of several of the shape and line markers.

  • a,990066,0,0.0,9.0 - Purple arrow, first series, first point, size 9.
  • c,FF0000,0,1.0,20.0 - Red cross, first series, second point, size 9.
  • d,80C65A,0,2,20.0 - Green diamond, first series, third point, size 9.
  • H,000000,0,3,1:40 - Black horizontal line, first series, data point 3, one pixel wide, forty pixels long.
  • o,FF9900,0,4.0,12.0 - Orange circle, first series, fifth point, size 12.
  • s,3399CC,0,5.0,11.0 - Blue square, first series, sixth point, size 11.
  • v,BBCCED,0,6.0,1.0 - Vertical line up to point, first series, seventh point, one pixel wide.
  • V,3399CC,0,7.0,1.0 - Vertical line bottom to top of chart, first series, eighth point, one pixel wide.
  • x,FFCC33,0,8.0,20.0 - Yellow 'X', first series, ninth point, size 20.
  • H,FFFF00,0,9,2 - Horizontal yellow line the width of the chart at data point 9.
  • h,FF0000,0,0.5,1 - Red horizontal line at designated height, first series, halfway up the chart, one pixel wide.
Line chart with markers
chm=
a,990066,0,0.0,9.0|
c,FF0000,0,1.0,20|
d,80C65A,0,2.0,20.0|
H,000000,0,3,1:40|
o,FF9900,0,4.0,12.0|
s,3399CC,0,5.0,11.0|
v,BBCCED,0,6,1.0|
V,3399CC,0,7,1.0|
x,FFCC33,0,8,20|
H,FFFF00,0,9,2|
h,FF0000,0,0.5,1

Here's an example using diamonds for one data series, and circles for the other data series.

If two or more markers occupy the same point, the markers are drawn in the order in which they appear in the chm parameter. Here, the circle is the first marker specified with chm , so it is drawn first. The diamond is specified and drawn second, which results in it being drawn on top of the circle.

Line chart, one line has 15 pixel circles on each data point the other line has 10 pixel diamonds. A diamond is drawn on the point that is common to both lines
chm=
o,FF9900,0,-1,15.0|
d,FF0000,1,-1,10.0

Here's a line chart with a marker on every second data point (-2 means every other point).

Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-2,6
Here's a line chart with twice as many markers as data points (-0.5 means every half point). Line chart with marker on every second point
chd=t:
0,20,20,50,40,70,70,90,85,45,40,50
chm=
o,0066FF,0,-.5,6
This example shows how to use h and v markers to create grid lines with custom colors and thickness. The z-order value (the last value) is set to -1 so that the grid lines are drawn beneath the data line.
Line chart with marker on every second point
chm=
h,76A4FB,0,0:1:.2,2,-1|
V,76A4FB,0,::2,0.5,-1

This chart adds vertical fill lines to a line chart:

  • v - Vertical lines to the chart
  • FF0000 - Red lines
  • 0 - Series index
  • : :.5 - Range specifier: from start to end, every 0.5 points.
  • 2 - Thickness 2 pixels.
Line chart with marker on every second point
chm=
v,FF0000,0,::.5,2
This example adds an arrow and text marker to the chart using exact coordinates. The first D marker is the trace line under the bars. The second marker is the arrow, and the third marker is the arrow text.
chm=
D,003971,1,0,3|
@a,000000,0,.25:.75,7|
@tExpected,000000,0,.35:.85,10
A horizontal line fixed to a specific data point ( H ) can be useful for showing relative values, or emphasizing the height of a data value on a chart.
chm=H,FF0000,0,18,1

This graph demonstrates the markers that can specify line thickness and length in the < size > parameter.

  • E,000000,0,6,1:20 - Black error bar with 1 pixel wide lines, top and bottom bars 20 pixels long. The bottom is anchored to series 0 point 8, the top is anchored to series 1 point 8.
  • H,990066,1,2,5:50 - Purple, horizontal line five pixels wide, fifty pixels long centered on data point 2.
  • V,3399CC,0,8,3:50 - Blue, vertical line 3 pixels wide, fifty pixels long, centered on data point 8.
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50%7CV,3399CC,0,8,3:50%7CE,000000,0,6,1:20" src="/chart/image/images/chart_95.png" />
chm=
E,000000,0,6,1:20|
H,990066,1,2,5:50|
V,3399CC,0,8,3:50

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

Text and Data Value Markers chm [ Bar, Line, Radar, Scatter ]

You can label specific points on your chart with custom text, or with formatted versions of the data at that point.

You can combine any chm markers using a pipe character ( | ) to separate the chm parameter sets.

Примечание о строковых значениях: в строках меток разрешены только символы, безопасные для URL. В целях безопасности вам следует закодировать URL-адресом все строки, содержащие символы, не входящие в набор символов 0-9a-zA-Z . Кодировщик URL-адресов можно найти в документации по визуализации Google .

Синтаксис

Specify one set of the following parameters for each series that should be marked. To mark multiple series, create additional parameter sets, delimited by a pipe character. You do not need to mark up all series. If you do not assign markers to a data series, it will not get any markers.

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type>
The type of marker to use. You can choose from the following types:
  • f<text> - A flag containing text. Specify the character 'f', followed by custom URL-encoded text. To escape commas in text markers, precede the comma by a \ mark. Example: fHello\,+World!
  • t<text> - A simple text marker. Specify the character 't' followed by custom URL-encoded text. To escape commas in text markers, precede the comma by a \ mark. Example: tHello\,+World!
  • A< text > - An annotation marker. This is similar to a flag marker, but markers will coordinate their position so that they do not overlap. The only valid format for < opt_which_points > is nd , to signify the index of a point in the series.
  • N< formatting_string > - The value of the data at this point, with optional formatting. If you do not use the chds parameter (custom scaling) it gives the exact encoded value; if you do use that parameter with any format type the value will be scaled to the range that you specify. See an example of chds with numeric markers below. With this marker type in a stacked bar chart , if you specify -1 for < series_index > you will get a marker that shows the sum of all values in this stacked bar. Синтаксис строки форматирования следующий:
    < preceding_text >*< number_type >< decimal_places >zs< x or y >*< following_text > .
    All of these elements are optional. Вот значение каждого элемента:
    • <preceding_text> - Text to precede each value.
    • *...* — необязательный блок, заключенный в буквенные звездочки, в котором можно указать детали форматирования чисел. Следующие значения поддерживаются и являются необязательными:
      • <number_type> — числовой формат для числовых значений. Выберите один из следующих вариантов:
        • f - [ По умолчанию ] Формат с плавающей запятой. Рассмотрите также возможность указать точность с помощью значения < decimal_places >.
        • p — процентный формат. Знак % добавляется автоматически. Примечание. При использовании этого формата значения данных от 0,0 до 1,0 преобразуются в значения от 0 до 100 % (например, 0,43 будет отображаться как 43 %).
        • e - Формат научной записи.
        • c< CUR > — форматирует число в указанной валюте с соответствующим маркером валюты. Замените < CUR > трехбуквенным кодом валюты. Пример: cEUR для евро. Список кодов можно найти на веб-сайте ISO , хотя поддерживаются не все символы.
      • <decimal_places> — целое число, определяющее количество отображаемых десятичных знаков. Значение округляется (не усекается) до этой длины. По умолчанию — 2.
      • z — отображать конечные нули. По умолчанию нет .
      • s — Отобразить разделители групп. По умолчанию нет .
      • x или y — отображение данных по координатам x или y, как указано. Значение данных x зависит от типа диаграммы: поэкспериментируйте с диаграммой, чтобы определить, что они означают. По умолчанию — «y» .
    • < following_text > - Text to follow each value.
< цвет >
The color of the markers for this set, in RRGGBB hexadecimal format .
< series_index >
The zero-based index of the data series on which to draw the markers. If this is a stacked bar chart and the marker type is N (data point values), you can specify -1 to create a summed value marker for each stack of bars. See below for an example.
< opt_which_points >
[ Optional ] Which point(s) to draw markers on. Default is all markers. Используйте одно из следующих значений:
  • nd - Which data point to draw the marker on, where nd is the zero-based index in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all data points.
  • -n - Draw a marker on every n -th data point.
  • start : end : n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
  • x : y - [ Not supported for N-type markers ] Draw a marker at a specific x/y point on the chart. This point does not have to be on a line. Add the at character ( @ ) before the marker type to use this option. Specify the coordinates as floating point values, where 0:0 is the bottom left corner of the chart, 0.5:0.5 is the center of the chart, and 1:1 is the top right corner of the chart. For example, to add a red, 15-pixel diamond to the center of a chart, use @d,FF0000,0,0.5:0.5,15 .
< размер >
The size of the marker in pixels. If this is a scatter chart with a third data series (used to specify point sizes), this value will be scaled by the data range. So if the data range is 0—100 and < size > is 30, a data value of 100 would be 30 pixels wide, a data value of 50 would be 15 pixels wide, and so on.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).
< opt_placement >
[ Optional ] Additional placement details describing where to put this marker, in relation to the data point. You can specify horizontal and/or vertical relative positioning, as well as offsets. Placement syntax is a string with : delimiters as shown here. All elements are optional: < horizontal_and_vertical_justification >:< horizontal_offset >:< vertical_offset > . If specified, you can include an empty ,, value in the chm parameter string for < opt_z_order >. Examples: N,000000,0,1,10,,b and N,000000,0,1,10,,lv and N,000000,0,1,10,,r::10 .
horizontal_and_vertical_justification
The anchor point of the marker. This behaves opposite to justification, so a left anchor actually puts the marker to the right of the data point. You can choose a horizontal and/or vertical justifier from the following list:
  • Horizontal placement : 'l', 'h', or 'r' - Left, center, or right-anchored, horizontally. Default is 'l'.
  • Vertical placement : 'b', 'v', 't' - Bottom, middle, or top-anchored, vertically. Default is 'b'.
  • Bar-relative placement [ Bar charts only] : 's', 'c', 'e' - Base, center, or top of a bar. For stacked charts, this is relative to the section of the bar for each series, not for the whole bar. If the series index given is -1 (stack total) it is in relation to the whole bar. This can be combined with vertical placement values: for example, 'be' or 'vs'. Default value is 'e'.
horizontal_offset
A horizontal offset for this marker, in pixels. Default is 0.
vertical_offset
A vertical offset for this marker, in pixels. Non-bar chart default: 15; bar chart chart default: 2 .

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

Here's an example of value labels on a bar chart.

The first chart ( N*p0* ) specifies a data value marker, with values shown as a percentage, rounded to zero decimal places, in black, on all values, in 11-point text. Note that the data values are all between 0.0 and 1.0, which, in percentage format, are moved up two decimal places.

The second chart ( N*cEUR1* ) shows the same values formatted as Euro values, one decimal place, in black, on all values, in 11-point text.

Bar chart with percentage labels above each bar
chm=
N*p0*,000000,0,-1,11
chd=t:
0.4356,0.3562,0.4834,0.575,0.673,0.6091


Bar chart with Euro labels above each bar


chm=
N*cEUR1*,000000,0,-1,11

You can use the chds parameter to scale the numeric value displayed. You can use chds for all data formats, including simple and extended encoding. This will not affect the bar size or the axis labels, but only the data marker value.

This example shows a chart with simple-encoded values of 46, 39, 29, 30, 43, 41. Simple encoding range is 0—61 . The chds parameter defines a custom marker scale of 0—1, so marker values are scaled to this range, but the bar heights are not affected (if this were text format data , the bars would be scaled as well).


chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

Here's an example of a chart with a text label at the minimum point and a flag label at the maximum point.

Line chart with 10pt blue text label, and flag with 15pt red text, drawn on the data points of a dashed green line.
chm=
tMin,0000FF,0,1,10|
fMax,FF0000,0,3,15

This example shows a stacked chart with values for individual series, plus the series total. To show the stacked series values, we must use the 'c' positioning option; if we did not, the top bar value would overlap the sum value at the top of each bar.
chm=
N,FF0000,-1,,12|
N,000000,0,,12,,c|
N,000000,1,,12,,c|
N,ffffff,2,,12,,c
Some more demonstrations of how vertical and horizontal placement work. This example demonstrates various combinations of anchor values for bar charts (which use s, c,and e for vertical placement). Note how a right anchor moves a marker left, and a top anchor moves a marker down, and vice-versa. The red dots show the base, center, and top of each bar. The number is the data value, fixed using different anchor values for each bar.
chm=
N,000000,0,0,10,,rs
N,000000,0,1,10,,ls
N,000000,0,2,10,,c
N,000000,0,3,10,,e
N,000000,0,4,10,,e::15
N,000000,0,5,10,,e::-12
Annotation markers automatically adjust the label position so that they don't overlap. The first chm value is for the line fill, the following values are all annotation markers.
chm=B,C5D4B5BB,0,0,0
AA,666666,0,3,15
AB,666666,0,5,15
AC,666666,0,24,15
AD,666666,0,25,15
AE,666666,0,26,15
AF,666666,0,51,15
AG,666666,0,60,15
AH,666666,0,73,15
AI,666666,0,80,15
AJ,666666,0,99,15
Another annotation marker example demonstrating city altitudes in Switzerland.

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

Range Markers chm [ Bar, Candlestick, Line, Radar, Scatter ]

You can color horizontal or vertical bands of background fill to highlight specific areas of a chart.

You can combine any chm markers using a pipe character ( | ) to separate the chm parameter sets.

Синтаксис

Specify one set of the following parameters for each band to draw. To draw multiple bands, create additional parameter sets, delimited by a pipe character. Ranges are drawn in the order specified, so the last range drawn will be drawn on top of previous ranges.

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direction>
Specifies horizontal or vertical shading. Use r for a horizontal range and R for a vertical range.
< цвет >
The range color as an RRGGBB format hexadecimal number .
0
Reserved — must be zero.
< start_point >
The start position of the range.
  • For horizontal range markers, this is a position on the y-axis, where 0.00 is the bottom of the chart, and 1.00 is the top of the chart.
  • For vertical range markers, this is a position on the x-axis, where 0.00 is the left of the chart, and 1.00 is the right of the chart.
< end_point >
The end position of the range.
  • For horizontal range markers, this is a position on the y-axis, where 0.00 is the bottom of the chart, and 1.00 is the top of the chart.
  • For vertical range markers, this is a position on the x-axis, where 0.00 is the left of the chart, and 1.00 is the right of the chart.

Примеры

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

Range markers can be a thin line or a band of color.

  • r,E5ECF9,0,0.75,0.25 - Range marker, pale blue, (reserved), 0.5 of the height of the chart.
  • r,000000,0,0.1,0.11 - Range marker, black, (reserved), starts at 0.1 of the way up the y-axis and ends at 0.11 of the way up the y-axis (a thin black line).
Line chart with a pale blue horizontal band stretching from 25 percent to 75 percent of the way up the y-axis and a thin horizontal line ten percent of the way up the y-axis
chm=
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11

This example shows the vertical range markers. The first marker is a red line ( FF0000 ), and the second is a pale blue band ( A0BAE9 ).

Line chart with a pale blue vertical band stretching from 25 percent to 75 percent of the way along the x-axis and a thin vertical line ten percent of the way along the x-axis
chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25

Markers are drawn in the order specified. In this example, you can see that the vertical red marker was drawn before the pale blue horizontal marker.

Line chart with a blue vertical band and paler blue horizontal band stretching from 25 percent to 75 percent of the way along the x and y-axis respectively. Thin vertical red line and thin horizontal black line ten percent of the way along the x and y-axis respectively
chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25|
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11

Here's an example of a line chart that uses range markers to draw faint horizontal lines across the chart at the zero line, midpoint line, and top.

Sparkline with single yellow line and three equally spaced horizontal lines
chm=
r,000000,0,0.499,0.501|
r,000000,0,0.998,1.0|
r,000000,0,0.0,0.002

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

Candlestick Markers chm=F [ Bar, Line ]

Candlestick markers indicate variance and direction change in a data series. Often they are used to show stock values during the course of a day. The marker includes segments that show the high and low value, as well as the opening and closing value for a specific time period (typically a day). For more about candlestick markers, see here .

A candlestick marker is drawn as a rectangle bisected by a vertical line. It requires four data series to draw a candlestick marker; here is what each series specifies:

  • Series 1 and 4 specify the bottom and top of the vertical line, respectively. These typically represent the low and high values for the day.
  • Series 2 and 3 specify the vertical borders of the rectangle. Series 2 is the opening value, and series 3 is the closing value. The color of the rectangle depends on which is higher: when the opening value (series 2) is lower than the closing value (series 3), the price has increased, and the rectangle is filled with solid green by default; when the opening value (series 2) is higher than the closing value (series 3), the price has decreased, and the rectangle is filled with solid red by default. You can only specify a fill color for the rectangle with decreasing value. When you specify that, the rectangle with increasing value is unfilled (empty). Note that series 2 can be either the top or the bottom of the rectangle, depending on whether the price has gone up or down.

You can combine candlestick markers with any other chm parameters using a pipe character ( | ) to separate the chm parameters.

Note: If you do not want the lines for the data used to draw the markers to appear in the chart, you must include a 0 after the format type. For example: chd=t0:10,20,30,40 in a text format data string. See Compound Charts for more information.

Here's an example, showing the lines for each series:

Синтаксис

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
Ф
Indicates that this is a candlestick marker.
<opt_declining_color>
[ Optional ] Fill color for the rectangles when the value is decreasing (when series 2 value > corresponding series 3 value). This is an RRGGBB format hexadecimal number . When the values increase, the rectangle will be empty. Default is solid green for increasing, solid red for decreasing (you cannot specify a custom fill color for increasing values).
< data_series_index >
The index of the data series to use as the first series for your candlestick markers. This is a zero-based index. So, if you specify 1 here, and you have six series, the second, third, fourth and fifth will be used to draw candlestick markers.
<opt_which_points>
[ Optional ] Specifies which data points are used to draw markers. Default is all markers. Use one of the following formats:
  • nd - Draw a marker on a single point in the series, where nd is the index of the point in the series. If you specify a non-integer value, then the fraction indicates a calculated intermediate point. For example, 3.5 means halfway between point 3 and point 4.
  • -1 - Draw a marker on all data points. You can also leave this parameter empty to draw on all markers.
  • - n - Draw a marker on every n -th data point.
  • start:end:n - Draw a marker on every n -th data point in a range, from start to end index values, inclusive. All parameters are optional (may be absent), so 3::1 would be from the fourth element to the last, step 1, and omitting this parameter entirely would default to first : last :1. All values can be floating point numbers. start and end can be negative, to count backward from the last value. If both start and end are negative, be sure that they are listed in increasing value (for example, -6:-1:1). If the n step value is less than 1, it will calculate additional data points by interpolating the data values given. Default values are first:last:1
<width>
The width of all rectangles, in pixels.
<opt_z_order>
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Примеры

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

Here's an example of candlestick markers on a line chart with four series. The custom fill color 0000FF (blue) is specified, and this color is used to fill the rectangles when the point in series 3 is smaller than the equivalent point in series 2.

The first and last rectangle are trimmed by the chart. To eliminate these values, you could specify 1:4 for the fourth parameter of chm.

Note the zero in the data string, to hide the lines for the series: chd=t0 . This indicates that all chart data is to be used for markers.

The < which_point > parameter is blank, which draws candlesticks on all data points.

Line chart with four orange lines and four financial markers

chd=t0:
0, 5,10, 7,12, 6|
35,25,45,47,24,46|
15,40,30,27,39,54|
70,55,63,59,80,60
chm=F,0000FF,0,,20

Here's an example of the same chart, using the default colors, and removing the first and last item.

This is a compound chart: it is a combination of a line chart (the base chart type) and candlestick markers. The value of 1 in cht=t:1 means that all data series after the first should be hidden from the basic chart type (line chart). The first 1 in chm=F,, 1 ,1:4,20 means that the candlestick data comes from series 2, 3, 4, and 5 (the 1 is zero-based). See Compound Charts for more information on how to draw a compound chart like this.

Line chart with one orange line and four financial markers.
cht=lc
chm=
F,,1,1:4,20

chd=t1:
15,40,30,27,39,54|
...

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

Line Markers chm=D [ Bar, Candlestick, Line, Radar, Scatter ]

You can add a line that traces data in your chart. Most often, this is used in compound charts .

To add multiple lines (or combine this with any other chm markers), separate the chm parameter sets using a pipe ( | ) delimiter. You cannot make a dashed line marker with this parameter.

Синтаксис

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
Indicates that this is a line marker.
< цвет >
The color of the line, in RRGGBB hexadecimal format .
< series_index >
The index of the data series used to draw the line. The data series index is 0 for the first data series, 1 for the second data series, and so on.
< which_points >
Which points in a series to use to draw the line. Используйте одно из следующих значений:
  • 0 - Use all the points in the series.
  • start:end - Use a specific range of points in the series, from the start to end , inclusive (zero-based index). You can also use floating point values to specify intermediate points, or leave start or end blank to indicate the first or last data point, respectively. start and end can be negative, as a reverse index from the last value. If both start and end are negative, be sure to write them in increasing value (for example, -6:-1).
< размер >
The width of the line in pixels.
< opt_z_order >
[ Optional ] The layer on which to draw the marker, compared to other markers and all other chart elements. This is a floating point number from -1.0 to 1.0, inclusive, where -1.0 is the bottom and 1.0 is the top. Chart elements (lines and bars) are just lower than zero. If two markers have the same value, they are drawn in the order given by the URL. Default value is 0.0 (just above the chart elements).

Примеры

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

This is an example of drawing a marker line on a bar chart. The z-order is set to 1 , so the line is drawn on top of the bars.

This example uses the same data for both the bars and the data line.
Bar chart with line marker
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

This is the same bar chart, but with an additional data series just for the line. This is an example of a compound chart. Compound charts are drawn by adding additional data series to the chd parameter, plus a value to chd telling the chart to "ignore" the additional data series.

See Compound Charts for more information.

Bar chart with line marker
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

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

Data Functions chfd [ All chd charts ]

You can specify a custom function to run over chart data using muParser function syntax . The data used in the function can come from one of two sources:

  • A data series from chd - The data is pulled from the specified series in chd .
  • A range of values declared in the chfd parameter itself - You declare a start, stop, and step value for an arbitrary data range.

It is important to note that in all cases you must assign the output to an existing series in chd ; that series will be overwritten by the function output. The chart is rendered only after all functions have been processes, so if you assign multiple functions to output to the same data series, the functions will be run in the order given, but only the output of the final function will be plotted on the chart. Note that you can chain functions, so that one function can take as input a series that was output by a previous function.

To assign colors or chm markers to a function line, assign the colors or markers to the function's series index. Note that markers are placed according to the data after it has been manipulated by the function.

Синтаксис

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>
< output_series_index >
Zero-based index of a data series in chd to which the function output will be written. Any existing data will be completely overwritten by the function output. If a series is not being used as input for a function, best practice is to assign a single dummy value to that series.
< function_data >
The variables and data to plot. The data can be from a range that you define, or from one of the chd data series. You can specify multiple variables for each function, using a ; (semicolon) delimiter for multiple variables. Note that if you define multiple variables for a single function, and these variables have a different number of points, the function will stop when it reaches the first endpoint. For example, if a function defines both x=1—5 step 1 and y=1—10 step 1, the function will end when it reaches the fifth point.
< variable_name >,< input_series_index >
ИЛИ
< variable_name >,< start >,< end >,< step >
  • variable_name - An arbitrary string name for the variable. Use this in the function defined by function_string .
  • input_series_index - The index of a chd data series to use as input data.
  • start - The numeric start value of a range.
  • end - The numeric end value of a range.
  • step - The numeric step value from start to end . Can be positive or negative, but cannot be zero.
Examples: x,0,100,1 declares a variable named x with values 0, 1, 2, ... 100. x,0,100,1;r,0,3.1,.1 declares the same x variable plus a variable named r with values 0, 0.1, 0.2, ..., 3.0, 3.1. x,0 declares a variable named x that uses the data from the first chd series. These variables will be used by function_string . They will not be plotted on the graph unless you specify them in function_string . The smaller the step, the smoother your graph.
< function_string >
Your function, written in the muParser syntax . The function is applied to the variables and data specified in variable_data . You can only reference the variables declared in this local function set, not in another piped set of chfd parameters. Summary muParser functions are not supported (min, max sum, avg). IMPORTANT: Remember to use %2B instead of + in your functions!

Примеры

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

A simple sine wave. Some things to notice:

  • chd=t:-1 - We use a dummy variable for the chart data, because our data is declared in the chfd parameter.
  • chco=FF0000 - Red is specified for the first series. Even though we don't use the data from chd , the corresponding color for that series will be used for that plotted function.
  • chfd=0,x,0,11,0.1,sin(x)*50%2B50 - We declare one variable, called x, with values 0—11, incremented by 0.1. It is assigned to the first series, which means it will get the first series color (FF0000). The function applied to x is sin(x) * 50 + 50. Note how we must encode the + in that function.

Sine wave specified by chfd
cht=lc
chd=t:-1
chco=FF0000
chfd=
0,x,0,11,0.1,sin(x)*50%2B50
chxt=x,y
This line uses data from the chd parameter.
chd=t:5,10
chfd=0,x,0,x*4

A mix of function and non-function lines.

Notice how the colors are specified by the series color parameter chco .

Notice the placement of markers on the function output; the data points are calculated from start , end , and step , so if your range is 0—11 step 0.1, point 0 is 0, point 1 is 0.1 and so on, until point 110, which has a value of 11.

One series using chfd, one using chd for its data.
chd=t:
-1
15,45
chco=
FF0000,000000
chfd=
0,x,0,11,0.1,sin(x)*50%2B50
chm=
c,00A5C6,0,110,10
a,00A5C6,0,60,10

To define a function in two dimensions, use an lxy chart, assign two dummy series, and assign a function to each.

  • 0,x,0,10,0.1,sin(x)*50%2B50 - Series 0 (the x-axis values) has a variable named x, with values from 0—10, step 0.1, and a function sin(x)*50 + 50
  • 0,y,0,10,0.1,sin(y)*50%2B50 - Series 0 (the y-axis values) has a variable named y, with values from 0—10, step 0.1, and a function sin(x)*50 + 50
A circle
cht=lxy
chd=t:-1|-1
chfd=
0,x,0,10,0.1,sin(x)*50%2B50|
1,y,0,10,0.1,cos(y)*50%2B50

The chfd parameter can really let you express your creativity.

Try clicking these images to open and play with them in the chart playground; you'll get hooked!



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