Шаблон:График:Диаграмма

Документация по шаблону [ просмотр ] [ правка ] [ история ] [ очистка ]

Этот шаблон используется примерно на 4600 страницах , и изменения могут быть широко замечены. Протестируйте изменения на подстраницах шаблона /sandbox или /testcases или на вашей собственной подстранице пользователя . Рассмотрите возможность обсуждения изменений на странице обсуждения перед их реализацией.

Ярлык

{{ График }}

Этот шаблон использует Lua :

Модуль: Граф ( песочница )

CSV2Chart

Если у вас есть данные из документа электронной таблицы (например, LibreOffice Calc) или из статистической программы R/R-Studio , вы можете экспортировать их в файл CSV. Файл CSV можно загрузить с помощью v:en:AppLSAC, который может преобразовать CSV в диаграмму для данных. Столбец должен иметь заголовки в первой строке. Столбец файла CSV содержит значения с плавающей точкой или целые числа. CSV2WikiChart был создан как вспомогательный инструмент для Википедии и учебных ресурсов Викиверситета, содержащих данные. Из-за временного отключения графиков добавленная функция CSV2WikiChart позволяет экспортировать диаграммы в формате SVG.

Параметры

ширина : ширина диаграммы
высота : высота диаграммы
type : тип диаграммы: lineдля линейных диаграмм , areaдля площадных диаграмм , rectдля (столбчатых) столбчатых диаграмм и pieдля круговых диаграмм . Несколько рядов могут быть сложены с помощью stackedпрефикса, например stackedarea.
interpolate : метод интерполяции для линейных и площадных диаграмм. Рекомендуется использовать monotoneдля монотонной кубической интерполяции – другие поддерживаемые значения перечислены на https://github.com/nyurik/vega/wiki/Marks#line.
colors : цветовая палитра диаграммы в виде списка цветов, разделенных запятыми. Значения цветов должны быть заданы либо как #rgb/ #rrggbb/ #aarrggbb, либо именем цвета CSS . Для #aarrggbbкомпонента aaобозначает альфа-канал , т. е. FF=100% непрозрачности, 80=50% непрозрачности/прозрачности и т. д. (Цветовая палитра по умолчанию, если n <= 10, — Category10: , в противном случае — Category20: ). Подробнее см. Template:ChartColors .
xAxisTitle и yAxisTitle : подписи осей x и y
xAxisMin , xAxisMax , yAxisMin и yAxisMax : минимальные и максимальные значения осей x и y (пока не поддерживаются для столбчатых диаграмм). Эти параметры можно использовать для инвертирования шкалы числовой оси, установив наименьшее значение на Max и наибольшее значение на Min.
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 , например xAxisFormat=%d-%m-%Y, для результата 13-01-1977.
xAxisAngle : поворачивает метки оси x на указанный угол. Рекомендуемые значения: -45, +45, -90, +90
xType и yType : типы данных значений, например, integerдля целых чисел, numberдля действительных чисел, dateдля дат (например, ГГГГ-ММ-ДД) и stringдля порядковых значений (используйте stringдля предотвращения повторения значений осей, когда имеется всего несколько значений). Примечания: Dateтип не работает для столбчатых диаграмм. Для dateввода данных используйте формат даты ISO (например, ГГГГ-ММ-ДД) в соответствии с форматами даты и времени, используемыми в HTML. Другие форматы даты могут работать, но не во всех браузерах. К сожалению, дата отображается только в формате en-US для всех языков Википедии. Обходной путь — использовать xAxisFormat и yAxisFormat с числовым форматом даты.
xScaleType и yScaleType : типы шкалы осей x и y, например, linearдля линейной шкалы (по умолчанию), logдля логарифмической шкалы и sqrtдля шкалы квадратного корня.
Логарифмическая диаграмма позволяет отображать только положительные значения. Диаграмма с квадратным корнем не может отображать отрицательные значения.
x : значения x в виде списка, разделенного запятыми, для дат и времени см. примечание в xType и yType
y или y1 , y2 , …: значения y для одного или нескольких рядов данных соответственно. Для круговых диаграмм y2обозначает радиус соответствующих секторов. Для дат и времени см. примечание в xType и yType
legend : показать легенду (работает только в случае нескольких рядов данных)
y1Title , y2Title , …: определяет метку соответствующего ряда данных в легенде
linewidth : ширина линии для линейных диаграмм или расстояние между сегментами круговой диаграммы для круговой диаграммы. Установка значения 0 type=lineсоздает диаграмму рассеяния.
linewidths : для каждой серии данных с помощью CSV можно задать различную ширину линий. Если установить значение 0 с помощью «showSymbols», то результаты будут представлены в виде графика точек, например:linewidths=1, 0, 5, 0.2
showSymbols : показывать символ в точке данных для линейных графиков, если указано число, размер символа (по умолчанию 2,5) может быть определен для каждой серии данных, например:showSymbols=1, 2, 3, 4
symbolsShape : пользовательская форма для символа: круг, x, квадрат, крест, ромб, треугольник_вверх, треугольник_вниз, треугольник_вправо, треугольник_влево. Может быть определен для каждой серии данных с csv, например:symbolsShape= circle, cross, square
symbolsNoFill : если true, то символ будет без заливки (только обводка),
symbolsStroke : если используется символ "x" или опция "symbolsNoFill", ширина штриха символа, по умолчанию 2,5
showValues : дополнительно выводит значения y в виде текста. (В настоящее время поддерживаются только (несоставные) столбчатые и круговые диаграммы.) Вывод можно настроить с помощью следующих параметров, указанных как name1:value1, name2:value2(например, |showValues=fontcolor:blue,angle:0).
- Формат : Отформатируйте вывод в соответствии с 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 : цвет текста
- размер шрифта : размер текста
- offset : сместить текст на заданное смещение. Для столбчатых диаграмм и круговых диаграмм с midangleэтим также определяется, находится ли текст внутри или снаружи диаграммы.
- угол (только для круговых диаграмм): текстовый угол в градусах или midangle(по умолчанию) для динамических углов на основе среднего угла сектора круговой диаграммы.
innerRadius : Для круговых диаграмм: определяет внутренний радиус для создания кольцевой диаграммы .
xGrid и yGrid : отображают линии сетки по осям x и y.
Аннотации
- vAnnotatonsLine и hAnnotatonsLine : отображают вертикальные или горизонтальные линии аннотаций для определенных значений, напримерhAnnotatonsLine=4, 5, 6
- vAnnotatonsLabel и hAnnotatonsLabel : отображать вертикальные или горизонтальные аннотационные метки для строк, напримерhAnnotatonsLabel = label1, label2, label3

Примечание: В предварительном просмотре редактора расширение графика создает элемент холста с векторной графикой. Однако при сохранении страницы вместо этого генерируется растровая графика PNG .

Примеры

Простые примеры

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

{{ График : Диаграмма  | ширина = 450 | высота = 150 | тип = линия | x = 1,2,3,4,5,6,7,8,9 | y = 10,12,6,14,2,10,7,9,12 }}

Примечание: Ось Y начинается с наименьшего значения Y, хотя это можно переопределить с помощью yAxisMinпараметра.

Диаграмма площади:

{{ График : Диаграмма  | ширина = 400 | высота = 100 | тип = область | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }}

Примечание: ось Y начинается с нуля.

Гистограмма:

{{ График : Диаграмма  | ширина = 400 | высота = 100 | xAxisTitle = Ось X | yAxisTitle = Ось Y | тип = прямоугольник | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }}

Несколько рядов данных

Линейная диаграмма с несколькими рядами данных, с использованием цветов:

{{ График : Диаграмма  | ширина = 400 | высота = 150 | xGrid =  | yGrid =  | xAxisTitle = X | yAxisTitle = Y | легенда = Легенда | тип = линия | x = 1,2,3,4,5,6,7,8 | y1 = 10,12,6,14,2,10,7,9 | y1Title = Серия Y1 | y2 = 2,4,6,8,13,11,9,2 | y2Title = Серия Y2 | цвета = #0000aa,#ff8000 }}

Диаграмма с областями, содержащая более одного ряда данных, показывающая смешанное перекрытие:

{{ График : Диаграмма  | ширина = 400 | высота = 100 | xAxisTitle = X | yAxisTitle = Y | легенда = Легенда | тип = область | 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 | цвета = #800000aa,#80ff8000 }}

Столбчатая диаграмма с несколькими рядами данных:

{{ График : Диаграмма  | ширина = 400 | высота = 100 | xAxisTitle = X | yAxisTitle = Y | легенда = Легенда | тип = прямоугольник | 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 | цвета = #800000aa,#80ff8000 }}

Диаграмма с областями со сглаженными значениями данных:

{{ График : Диаграмма  | ширина = 400 | высота = 150 | xAxisTitle = X | yAxisTitle = Y | легенда = Легенда | тип = 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 | интерполяция = монотонная | цвета = морская зелень, орхидея }}

Столбчатая диаграмма с накопленными рядами данных:

{{ График : Диаграмма  | ширина = 400 | высота = 150 | xAxisTitle = X | yAxisTitle = Y | легенда = Легенда | тип = 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 = Данные A | y2Title = Данные B | цвета = морской, орхидейный }}

Круговые диаграммы

{{ График : Диаграмма  | ширина = 100 | высота = 100 | тип = круговая | легенда = буква | x = A,B,C,D,E,F,G,H,I | y1 = 100,200,150,300,100,100,150,50,200 }}

{{ График : Диаграмма  | ширина = 100 | высота = 100 | тип = круговая | легенда = буква | x = A,B,C,D,E,F,G,H,I | y1 = 100,200,150,300,100,100,150,50,200 | showValues = }}

{{ График : Диаграмма  | ширина = 100 | высота = 100 | тип = круговая | легенда = буква | 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 = }}

{{ График : Диаграмма  | ширина = 100 | высота = 100 | тип = круговая | внутренний радиус = 40 | легенда = буква | x = A,B,C,D,E,F,G,H,I | y1 = 100,200,150,300,100,100,150,50,200 }}

Диаграмма рассеяния

Используя линейный график с linewidth=0, можно создать диаграмму рассеяния :

{{ График : Диаграмма | ширина = 500 | высота = 200 | тип = линия | x = 15,7,10,8,68,5,33,4,23,8,42,2,27,1,38,2,13,5,74,3 | y1 = 1517,970,4075,3819,2106,2919,2428,2164,1393,7603 | showSymbols = 1 | ширина линии = 0 | yGrid =  | xGrid =  }}

Использование процентов

Если xAxisFormatили yAxisFormatустановлено значение %, к шкале соответствующей оси будет добавлен знак процента.
Значение 1равно 100%. Перед процентами от 0 до 100 следует добавлять десятичную точку, например, .25для 25%.
Включение кода | yAxisMin=0 | yAxisMax=1заставит шкалу оси Y изменяться от 0% до 100%.

{{ График : Диаграмма | ширина = 450 | высота = 350 | x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 | yAxisMin = 0 | yAxisMax = 1 | yAxisFormat =  % | showSymbols =  | y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46 | y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63 | y3 = .27, .311, .31, , .26, .28, .285 | y4 =  {{ повтор | 7 | , }} .40, .44, .42, .47, .44, .43, .42 }}

График, показывающий значения больше 100% и отрицательные значения:

{{ График : Диаграмма | ширина = 450 | высота = 350 | x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 | yAxisFormat =  % | showSymbols =  | y1 = 2, .43, 1.20, .39, .43, .0, -.38, -.20, .18, .54 , 0 }}

Легенды

При наличии нескольких рядов данных можно добавить легенду:

{{ График : Диаграмма  | ширина = 400 | высота = 150 | xAxisTitle = X | yAxisTitle = Y | легенда = Легенда | y1Title = Синий | y2Title = Оранжевый | тип = линия | 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 }}

Заголовок можно опустить, оставив параметр пустым:

{{ График : Диаграмма  | ширина = 400 | высота = 150 | xAxisTitle = X | yAxisTitle = Y | легенда =  | y1Title = Синий | y2Title = Оранжевый | тип = линия | 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 }}

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

{{ Graph : Chart  | width = 400 | height = 150 | xAxisTitle = X | yAxisTitle = Y | colors = darkred, gold | 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 } } { { legend | darkred | Это длинная запись легенды, и она бы не выглядела так хорошо, если бы была частью самого графика. }} {{ legend | gold | Это еще одна довольно длинная запись. }}

Это длинная легенда, и она не выглядела бы так хорошо, если бы была частью самого графика.

Это еще одна довольно длинная запись.

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

#1f77b4

#ff7f0e

#2ca02c

#d62728

#9467бд

#8c564b

#e377c2

#7f7f7f

#bcbd22

#17becf

В качестве альтернативы в шаблонах графика и легенды можно указать названия цветов CSS (или шестнадцатеричные значения).

Аннотации

Линейная диаграмма только с горизонтальными аннотациями:

{{ График : Диаграмма | hannotatonslabel = label4, label5, label6 | hannotatonsline = 4, 5, 6 | ширина линий = 2,4,0 | showSymbols = 3,3,3 | symbolShape = треугольник_вверх, крест, крест | тип = линия | x = 0,1,2,3 | y1 = 0,3.342,2.3423,5.32423 | y2 = 1,2.342,4.63,2.32423 | y3 = 3,1.342,2.63,6.32423 }}

Диаграмма области только с вертикальными аннотациями

{{ График : Диаграмма | vAnnotatonsLine = 1, 2, 3 | vAnnotatonsLabel = label1, label2, label3 | цвета = #ffff5ba0, #641050ff, #ffaaff00 | тип = область | x = 0,1,2,3 | y3 = 0,3.342,2.3423,5.32423 | y2 = 1,2.342,4.63,2.32423 | y1 = 3,1.342,2.63,6.32423 }}

Отображать

Помещение диаграммы в {{ image frame }} позволяет графику перемещаться, а текст может обтекать его:

{{ Рамка изображения  | подпись = Линейная диаграмма | содержимое =  {{ График : Диаграмма  | ширина = 400 | высота = 150 | тип = линия | yAxisMin = -1 | x = 1,2,3,4,5,6,7,8 | y = 10,12,6,14,2,10,7,9 }}  }}

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

Чтобы добавить заголовок над диаграммой и ссылки на источники под диаграммой, можно использовать |pos=top{ { image frame }} .

Смотрите также

Вышеуказанная документация включена из Template:Graph:Chart/doc . ( могут экспериментировать на страницах sandbox и testcases этого шаблона . Добавьте категории на подстраницу /doc . Подстраницы этого шаблона .