Шаблон:Graph:Chart (OgQlku&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
- vAnnotatonsLine and hAnnotatonsLine: display vertical or horizontal annotation lines on specific values e.g.
Внимание: При предпросмотре расширение 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 | без описания
| Однострочный | обязательный |
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 | без описания | Неизвестно | необязательный |