Jump to content

Розширення:Chart

Issue tracker: #Chart
From mediawiki.org
This page is a translated version of the page Extension:Chart and the translation is 100% complete.
Languages:
Довідка про розширення MediaWiki
Chart
Статус релізу: стабільний
Реалізація Тег
Опис Відображення діаграм
Автор(и) Brooke Vibber, Katie Filbert, Roan Kattouw
Політика сумісності Майстер підтримує зворотню сумісність.
MediaWiki >= 1.46
Зміни в БД Ні
Параметри
  • $wgChartRequestSizeLimit
  • $wgChartProgressiveEnhancement
  • $wgChartTransformsEnabled
  • $wgChartServiceUrl
  • $wgChartCliPath
Використані hook'и
Licence GNU General Public License 3.0 або пізніше
Завантажити
Download extension
Git [?]:

README
Перекладіть розширення Chart, якщо воно доступне у translatewiki.net
Проблеми Відкриті проблеми · Повідомити про помилку

Розширення Chart надає базові можливості з інтерактивної візуалізації даних, які розроблені для заміни деяких, але не всіх аспектів розширення Graph . Це розширення зараз в розробці для вікі проєктів Вікімедіа. Детальніше щодо деталей про процес розробки див. Extension:Chart/Project .

Ця розширення підтримує наступні типи діаграм:

Встановлення

Розширення Chart вимагає наявність встановленого розширення JsonConfig , а також завантаження бібліотеки Chart Renderer JavaScript (насправді TypeScript).

Див. файл README.md в репозиторії щодо повної інструкції зі встановлення.

Продукція Вікімедіа

Про використання продукції Вікімедіа, див. wikitech:Kubernetes/Deployments#Cheatsheet щодо загальних інструкцій з впровадження розширення. Ключові речі звідси:

  • find your commit's build image id from chart-renderer's CI, eg "2025-06-24-201619-production"
    • edit deployment-charts's helmfile.d/services/chart-renderer/values.yaml to reference the new version
    • get it +2'd by a deployer
  • (as a deployer) log into deployment.codfw.wmnet or deployment.eqiad.wmnet depending on the active data center
    • $ cd /srv/deployment-charts/helmfile.d/services/chart-renderer
      • latest service config should appear within a couple minutes (there's a regular update job)
    • $ helmfile -e staging -i apply --context 5
      • confirm the changes and let it deploy to staging
  • test rendering on beta cluster
    • TODO: add a specific page with our planned live test charts
    • TODO: add directions on checking pixel rendering results
  • once confirmed good, deploy to main clusters:
    • $ helmfile -e codfw -i apply --context 5
      • confirm the changes and let it deploy to codfw
    • $ helmfile -e eqiad -i apply --context 5
      • confirm the changes and let it deploy to eqiad

Інструкція з використання

Щоб відобразити діаграму, ви повинні спершу визначитися з джерелами даних, які ви хочете відобразити. Визначення діаграми структуровано як відносно простим файлом JSON; див. Extension:Chart/Specification щодо деталей про синтаксис.

Синтакс табличних даних .tab

Всіх діаграми в цьому прикладі можуть відображатися з одного і того самого джерела даних: Data:Chart Example Data.tab, вигаданий набір даних. Приклад вмісту для цих сторінок можна знайти в каталозі sample.

Data:Example.chart
{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Chart Example Data.tab",
    "type": "line",
    "title": {
        "en": "Example Chart Title"
    },
    "subtitle": {
        "en": "Example Subtitle"
    },
    "xAxis": {
        "title": {
        	"en": "Example X Axis Title"
        },
        "format": "none"
    },
    "yAxis": {
        "title": {
            "en": "Example Y Axis Title"
        },
        "format": "none"
    },
    "mediawikiCategories": [
        {
            "name": "Example category",
            "sort": "Its sortkey"
        }
    ],
    "transform": {
        "module": "Optional lua module for data transforms",
        "function": "transform_func",
        "args": {
            "arg_name": "arg_value"
        }
    }
}

Коли діаграму визначено, то ви можете її відобразити, просто використавши персерну функцію #chart. У цьому випадку дані діаграми визначено в Data:Chart Example Data.tab, а сама діаграма — Data:Example.Line.chart:

Wikipedia article title
{{#chart:Example.Line.chart}}

Зверніть увагу, що діаграми можуть бути загальними і перевикористаними з іншими джерелами даних, наприклад: 

{{#chart:Population through years.chart
|data=Population of USA.tab
}}

{{#chart:Population through years.chart
|data=Population of UK.tab
}}

{{#chart:Population through years.chart
|data=Population of Poland.tab
}}

Формати дат в табличних даних

При створенні діаграм з датами на осі x, дати в табличних даних повинні бути в форматі рядків, які точно дорівнюють 10 символам у вигляді:

  • YYYY-MM-DD, наприклад, 2025-10-20

Інші 10-символьні рядки, які парсуються функцією Date.parse() JavaScript можуть також працювати, хоча вони офіційно не підтримуються.

Коли виявлено дати в першому стовпчику табличних даних, то вони автоматично перекладаються залежно від мови вмісту вікі. 

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "mediawikiCategories": [
        {
            "name": "Data:.tab",
            "sort": ""
        },
        {
            "name": "Data:Examples.tab",
            "sort": ""
        }
    ],
    "schema": {
        "fields": [
            {
                "name": "date",
                "type": "string",
                "title": {
                    "en": "Date",
                    "fr": "Date"
                }
            },
            {
                "name": "pc",
                "type": "number",
                "title": {
                    "en": "PC",
                    "fr": "PC"
                }
            },
            {
                "name": "liberal",
                "type": "number",
                "title": {
                    "en": "Liberal",
                    "fr": "Libéral"
                }
            },
            {
                "name": "ndp",
                "type": "number",
                "title": {
                    "en": "NDP",
                    "fr": "NPD"
                }
            },
            {
                "name": "bq",
                "type": "number",
                "title": {
                    "en": "BQ",
                    "fr": "BQ"
                }
            },
            {
                "name": "reform",
                "type": "number",
                "title": {
                    "en": "Reform",
                    "fr": "Réform"
                }
            }
        ]
    },
    "data": [
        [
            "1993-09-09",
            35,
            37,
            8,
            8,
            10
        ],
        [
            "1993-09-14",
            36,
            33,
            8,
            10,
            11
        ],
        [
            "1993-09-20",
            35,
            35,
            6,
            11,
            11
        ]
    ]
}

Див. приклади у Сховищі:

Для років, дати повинні бути числами: 

{
    "license": "CC0-1.0",
    "description": {
        "en": "New Zealand annual wine production, in millions of litres"
    },
    "sources": "Statistics from New Zealand Winegrowers 1998–2024 annual reports",
    "schema": {
        "fields": [
            {
                "name": "year",
                "type": "number",
                "title": {
                    "en": "Year"
                }
            },
            {
                "name": "production",
                "type": "number",
                "title": {
                    "en": "Wine produced (million litres)"
                }
            }
        ]
    },
    "data": [
        [
            1990,
            54.4
        ],
        [
            1991,
            49.9
        ],
        [
            1992,
            41.6
        ],
        [
            1993,
            32.5
        ],
        [
            1994,
            41.1
        ],
        [
            1995,
            56.4
        ]
    ]
}

Приклад діаграм та табличних даних з роками на осі x:

Детальніше щодо підтримки дат див. Support for dates ADR в gerrit.

Налаштування

Вісь YНомер кольору0200400600800100012001#4b77d6#eeb533#fd7865#80cdb3#269f4b#b0c1f0#9182c2#d9b4cd#b0832b#a2a9b1Колір Необроблені дані
Доступні десять колорів Hex.

Наразі налаштування діаграм є обмеженим. Надія полягає в тому, що після тестування, обговорення та оцінення, можна буде знайти рішення для налаштування діаграм, що не буде порушувати доступність, відображення, що притаманне певному пристрою, або безпеку.

Зміна розміру

Зараз діаграми займають всю ширину контейнера, в якому ви їх розміщуєте.

Кінцевою метою є впевнетися, що діаграми можуть розбірливо відображатися незалежно від пристрою, на якому їх переглядають; детальніше див. T376845.

Оформлення

Зараз діаграми обмежені єдиною стандартною кольоровою палітрою. Ця палітра була ретельно розроблена з увагою до доступності. Дізнатися про причини вибору цих кольорів можна в T369863.

Деякі діаграми вимагають певні кольорові теми, наприклад, щоб відображати дані, які пов'язані з політичними партіями. Досі лишається відкритим питання як краще підтримувати цей вид налаштувань без порушення можливостів читачів з потребами доступності (наприклад, колірна сліпота) щодо їх використання.

Застереження

Зверніть увагу, що хоча зараз діаграми відображають вивід SVG, який можна оформити, використавши, TemplateStyles, але, будь ласка, майте на увазі, що стилі, які пов'язані з елементами SVG, не варто вважати за постійні, так як вони можуть змінитися у будь-який момент. Будь ласка, не покладайтесь на CSS, щоб видозмінити вигляд діаграм, бо це в майбутньому може спричинити нефункціональні діаграми або втрутитися у функції доступності, що змінюють розмір шрифту, та функції як темний режим.


Інтернаціоналізація

Діаграми можуть лише бути вбудованими в мову контенту вікі; тому, наприклад, рядок запиту «uselang» (наприклад, ?uselang=es) не впливатиме на діаграму.

Формат діаграми підтримує визначення тексту як назва і мітки іншими мовами, тому одна і та сама діаграма може бути використана у вікі різними мовами. Див. цей приклад діаграми з підтримкою для кількох мов, який відображається в іспанській вікі.

Відомі проблеми

Див. цей відфільтрований погляд на дошці Charts Phabricator.

Типи діаграм

Для всіх діаграм очікується, що дані розміщенні в стовпчиках, де перший стовпчик представляє x-axis, а наступні стовпчики представляють ряди або криві на y-axis.

Лінійна

%підтримкаДата0102030405009.09.199326.09.199319.10.1993ЕльфиЕнтиОркиГобітиТроліПриклад лінійної діаграмиПриклад підзаголовка Необроблені дані
Це приклад лінійної діаграми.

У наступному прикладі {{#chart: }} огортається в контейнер {{Image frame }}, щоб вказати ширину діаграми та додати підпис. Також вказується посилання на необроблені табличні дані, де можна знайти інформацію щодо джерел даних:

Wikipedia article title
{{image frame
|content={{#chart:Example.Line.chart}} [[commons:Data:Chart Example Data.tab|'''Raw data''']]
|width = 340
|caption = This is an example of a line chart.
}}

Див. результати в цьому розділі.

Стовпчикова

Ось діаграма, що охоплює всю ширину зони вмісту сторінки:

Wikipedia article title
{{#chart:Example.Bar.chart}} <div align="center">[[commons:Data:Chart Example Data.tab|'''Raw data''']]</div>

Це призводить до:

%підтримкаДата0102030405009.09.199326.09.199319.10.1993ЕльфиЕнтиОркиГобітиТроліПриклад стовпчикової діаг...Приклад підзаголовка

З областями

%підтримкаДата02040608010009.09.199326.09.199319.10.1993ЕльфиЕнтиОркиГобітиТроліПриклад діаграми з областя...Приклад підзаголовка

Секторна

Секторні діаграми є особливим видом діаграм, а тому джерела даних можуть вимагати внесення змін, щоб правильно відображатися.

При читанні даних будь-які нечислові стовпчики (наприклад, вісь x) буде відкинуто, а сума всіх рядків буде відображена на діаграмі.

Наприклад, де кілька рядків відображають значення чилових дат для А, Б і В, наприклад, 1 січня і 2 січня, то секторна діаграма для А відобразить суму всіх значень рядка А для цих дат.

ЕльфиЕнтиОркиГоб...ТроліЕльфиЕнтиОркиГобітиТроліПриклад секторної діаграмиПриклад підзаголовка

Пошук наявних діаграм

Діаграми, що використовуються в статтях, розміщуються в Вікісховищі та можуть відстежуватися, використовуючи категорії MediaWiki.

Цей запит може бути використаний як проксі, щоб знайти діаграми, які створили інші користувачі та додати переклади, а цей, щоб знайти сторінки з tab, які можуть використовуватися для створення діаграм.

Список вікісторінок, що використовують в будь-які певній вікі, можна знайти в категорії, чия назва визначена в MediaWiki:chart-render-category та MediaWiki:Chart-error-category (Category:Pages using the Chart extension та Category:Pages using the Chart extension with rendering errors у цій вікі). Будь ласка, впевніться, що категорії вашої вікі прив'язані до d:Q131382738 та d:Q131406605, щоб спростити пошуку між вікі.

Перенесення з розширення Graph

Будь ласка, перегляньте категорію Сторінки, на яких графіки вимкнуто різними мовами щодо старих графіків, які потрібно перенести на розширення Charts. Хоча деякі вже були видалені без заміни їх на нові діаграми. Список можна порівняти з архівованим списком перших 200 з 23 811 сторінок англійської Вікіпедії з вимкненими графіками з 2023, невдовзі після того, як шаблони були додані до тієї категорії, та відповідними в інших мовних розділах.

Технічна документація

З огляду на проблеми з Extension:Graph , всі рішення щодо нового розширення були ретельно розглянуті з надією вибудувати довіру та впевненість до його заміни.

До цього часу технічні рішення документувалися в репозиторії коду у папці /doc/adr.

Відстежування помилок

Сторінки з помилками .chart автоматично збарігаються в commons:Category:Pages using the Chart extension with rendering errors. Вікісторінки з поламаними діаграмами автоматично розміщуються в Категорія:Сторінки з помилками відображення розширення Chart різними мовними версіями.

Помилки з відображенням діаграм на сторні клієнта будуть записуватися до logstash. (Лише для розробників.)

Інструменти для створення діаграм

Є кілька можливих методів для напівавтоматичного створення та редагування діаграм та їхній табличних даних:

  • Можна використати скрипт graphDataImport у веббраузері, щоб витягнути дані з наявного вікітексту і подібного коду графу та перетворити його на сторінку .tab, сторінку визначення .chart і новий вікітекст.
  • Можна написати запит для генеративного ШІ, щоб витягнути код з наявних таблиць і вікікоду графів, перетворити його на сторінки .tab і .chart та створити новий вікікод, відповідно до наданих специфікацій. Він також може надати переклад назв та бути використаним для розширення й оновлення сторінки .tab новими даними.
  • Гаджет TabularImportExport може перетворити Excel і файли .csv на сторінки .tab та з них. Ви можете активувати його у своїх налаштуваннях Сховища.
  • Інтерфейс користувача JSON Редагувати як таблицю (частина розширення Jsonconfig ) доступний зі сторінки редагування .tab.
  • Деякі боти можуть періодично імпортувати статистику з вебу або з наявних графів Вікіпедії до сторінок .tab або .chart за запитом. До таких ботів входять DPLA bot і SLiuBot.
  • GraphBot портує графи англійської Вікіпедії на діаграми.

Див. також

Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:Chart/uk&oldid=8414343"