Шаблон:Graph:Chart

Документация

[просмотр | править | история | ]

Описание параметров

• width: ширина диаграммы
• height: высота диаграммы
• type: тип диаграммы: line для линейных, area для диаграмм с областями, rect для (вертикальной) столбчатых и pie для круговых диаграмм. Ряды данных могут быть наложены друг на друга с помощью префикса stacked, например, stackedarea.
• interpolate: метод интерполяции для линейных диаграмм и диаграмм с областями. Рекомендуется использовать monotone для монотонной кубической интерполяции, другие значения перечислены на https://github.com/vega/vega/wiki/Marks#area.
• colors: цветовая палитра диаграммы списком, разделённым запятой. Значения цветов должны указываться в форматах #rgb/#rrggbb/#aarrggbb или по названию в CSS. В формате #aarrggbb aa — альфа-канал, т. е. FF = 100% прозрачности, 80 = 50% прозрачности и т. п. (Стандартная цветовая палитра — category10.)
• xAxisTitle и yAxisTitle: заголовки для осей x и y
• xAxisMin, xAxisMax, yAxisMin и yAxisMax: минимальные и максимальные значения осей x и y (пока не поддерживается для столбчатых диаграмм)
• xAxisFormat и yAxisFormat: меняет форматирование меток у осей. Поддерживаемые значения перечислены на https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers для чисел и https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md для дат/времени. Например, формат % можно использовать для вывода процентов.
• xAxisAngle: поворачивает метки на оси x на указанное число градусов. Рекомендуемые значения: -45, +45, -90, +90
• xType и yType: типы данных для значений, например, integer для целых чисел, number для вещественных чисел, date для дат (например, ГГГГ/ММ/ДД) и string для порядковых значений.
• xGrid=x и yGrid=y: включает сетки по осям.
• x: значения x, разделённые запятой.
• y или y1, y2, …: значения y для одной или нескольких рядов данных соответственно. В круговых диаграммах y2 указывает радиусы соответствующих секторов.
• legend: показать легенду (работает для нескольких рядов данных)
• y1Title, y2Title, …: метки соответствующих рядов данных в легенде
• linewidth: ширина линии в линейных диаграммах или расстояние между сегментами круга в круговых диаграммах
• linewidths: different line widths may be defined for each series of data with csv, if set to 0 with "showSymbols" results with points graph, eg.: linewidths=1, 0, 5, 0.2
• showSymbols: (для линейных диаграмм) показать символ (круг) на каждой точке данных, if number is provided it's size of symbol, default 2.5. may be defined for each series of data with csv, eg.: showSymbols=1, 2, 3, 4
• symbolsShape: custom shape for symbol: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. May be defined for each series of data with csv, eg.: symbolsShape= circle, cross, square
• symbolsNoFill: if true symbol will be without fill (only stroke),
• symbolsStroke: if "x" symbol is used or option "symbolsNoFill" symbol stroke width, default 2.5
• showValues: выводить значения y текстом. (На текущий момент, поддерживаются (нестековые) столбчатые диаграммы и круговые диаграммы.) Вывод может настраиваться через следующие параметры, заданные как название1:значение1, название2:значение2:
  • format: отформатировать вывод в соответствии с https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers для чисел и https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md для времени.
  • fontcolor: цвет текста
  • fontsize: размер текста
  • offset: передвинуть текст на заданное расстояние. Для круговых диаграмм с параметром midangle и столбчатых диаграмм этот параметр также задаёт, внутри или снаружи находится текст.
  • angle (только в круговых диаграммах): угол текста в градусах или midangle (по умолчанию) для динамических углов на основании среднего угла сектора круговой диаграммы.
• innerRadius: (для круговых диаграмм) задаёт внутренний радиус для создания «диаграммы-пончика».
• Annotations
  • vAnnotatonsLine and hAnnotatonsLine: display vertical or horizontal annotation lines on specific values e.g. hAnnotatonsLine=4, 5, 6
  • vAnnotatonsLabel and vAnnotatonsLabel: display vertical or horizontal annotation labels for lines e.g. hAnnotationLabel = label1, label2, label3

Внимание: При предпросмотре расширение Graph создаёт элемент canvas с векторной графикой. После сохранения генерируется PNG-изображение.

Примеры

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

{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Диаграмма с областями:

{{Graph:Chart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Note: The y-axis starts from zero

Столбчатая диаграмма:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Line chart with more than one data series, using colors:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=line|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Area chart with more than one data series showing blended overlap:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Bar chart with multiple data series:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Area chart with smoothed data values:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Bar chart with stacked data series:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

График не отображается по техническим причинам. Чтобы исправить это, воспроизведите график в новом формате, если это возможно.

Данные о шаблоне

Вставляет диаграммы разных типов

Параметры шаблона[Править данные шаблона]

Шаблон использует блочное форматирование параметров.

Параметр		Описание	Тип	Статус
width	width	без описания	Число	обязательный
height	height	без описания	Число	обязательный
type	type	без описания Предлагаемые значения line area rect pie bar stackedarea stackedbar	Однострочный	обязательный
interpolate	interpolate	без описания	Неизвестно	необязательный
colors	colors	без описания	Неизвестно	необязательный
xAxisTitle	xAxisTitle	без описания	Неизвестно	необязательный
yAxisTitle	yAxisTitle	без описания	Неизвестно	необязательный
xAxisMin	xAxisMin	без описания	Неизвестно	необязательный
xAxisMax	xAxisMax	без описания	Неизвестно	необязательный
yAxisMin	yAxisMin	без описания	Неизвестно	необязательный
yAxisMax	yAxisMax	без описания	Неизвестно	необязательный
xAxisFormat	xAxisFormat	без описания	Неизвестно	необязательный
yAxisFormat	yAxisFormat	без описания	Неизвестно	необязательный
xAxisAngle	xAxisAngle	без описания	Неизвестно	необязательный
xType	xType	без описания	Неизвестно	необязательный
yType	yType	без описания	Неизвестно	необязательный
x	x	без описания	Неизвестно	обязательный
y	y y1	без описания	Неизвестно	обязательный
legend	legend	без описания	Неизвестно	необязательный
y1Title	y1Title	без описания	Неизвестно	необязательный
linewidth	linewidth	без описания	Неизвестно	необязательный
showValues	showValues	без описания	Неизвестно	необязательный
showSymbols	showSymbols	без описания	Неизвестно	необязательный
innerRadius	innerRadius	без описания	Неизвестно	необязательный

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