Шаблон:Graph:Chart

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
Документация

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

  • width: ширина диаграммы
  • height: высота диаграммы
  • type: тип диаграммы: line для линейных[en], area для диаграмм с областями[en], rect для (вертикальной) столбчатых и pie для круговых диаграмм[en]*. Ряды данных могут быть наложены друг на друга с помощью префикса stacked, например, stackedarea.
  • interpolate: метод интерполяции для линейных диаграмм и диаграмм с областями. Рекомендуется использовать monotone для монотонной кубической интерполяции[en], другие значения перечислены на 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: ширина линии в линейных диаграммах или расстояние между сегментами круга в круговых диаграммах
  • 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 (по умолчанию) для динамических углов на основании среднего угла сектора круговой диаграммы.
  • showSymbols: (для линейных диаграмм) показать символ (круг) на каждой точке данных.
  • innerRadius: (для круговых диаграмм) задаёт внутренний радиус для создания «диаграммы-пончика».

Внимание: При предпросмотре расширение 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}}

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

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

Параметры шаблона

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

ПараметрОписаниеТипСтатус
Widthwidth

без описания

Неизвестнопредложенный
Heightheight

без описания

Неизвестнопредложенный
Typetype

без описания

Неизвестнопредложенный
Interpolateinterpolate

без описания

Неизвестнонеобязательный
Colorscolors

без описания

Неизвестнонеобязательный
XAxisTitlexAxisTitle

без описания

Неизвестнонеобязательный
YAxisTitleyAxisTitle

без описания

Неизвестнонеобязательный
XAxisMinxAxisMin

без описания

Неизвестнонеобязательный
XAxisMaxxAxisMax

без описания

Неизвестнонеобязательный
YAxisMin yAxisMin

без описания

Неизвестнонеобязательный
YAxisMaxyAxisMax

без описания

Неизвестнонеобязательный
XAxisFormat xAxisFormat

без описания

Неизвестнонеобязательный
YAxisFormatyAxisFormat

без описания

Неизвестнонеобязательный
XAxisAnglexAxisAngle

без описания

Неизвестнонеобязательный
XType xType

без описания

Неизвестнонеобязательный
YTypeyType

без описания

Неизвестнонеобязательный
Xx

без описания

Неизвестнообязательный
Yy y1

без описания

Неизвестнообязательный
Legendlegend

без описания

Неизвестнонеобязательный
Y1Titley1Title

без описания

Неизвестнонеобязательный
Linewidthlinewidth

без описания

Неизвестнонеобязательный
ShowValuesshowValues

без описания

Неизвестнонеобязательный
ShowSymbolsshowSymbols

без описания

Неизвестнонеобязательный
InnerRadiusinnerRadius

без описания

Неизвестнонеобязательный