Extension:Chart

**MediaWiki 拡張機能マニュアル**
Chart; リリースの状態: 安定
実装	タグ
説明	チャートのレンダリング
作者	Brooke Vibber, Katie Filbert, Roan Kattouw
互換性の方針	master は後方互換性を維持しています。
MediaWiki	>= 1.46
データベースの変更	いいえ
ライセンス	GNU 一般公衆利用許諾書 3.0 以降
ダウンロード	拡張機能をダウンロード ; Git [?]: リポジトリを参照 (Phabricator · GitHub); Gerrit コードレビュー; Git コミットログ; Download source tarball; ; README
	パラメーター $wgChartRequestSizeLimit; $wgChartProgressiveEnhancement; $wgChartTransformsEnabled; $wgChartServiceUrl; $wgChartCliPath;
	使用するフック LinksUpdateComplete; PageSaveComplete; ParserFirstCallInit;
	translatewiki.net で翻訳を利用できる場合は、Chart 拡張機能の翻訳にご協力ください
問題点	未解決のタスク · バグを報告

This page is a translated version of the page Extension:Chart and the translation is 100% complete.

拡張機能 Chart はインタラクティブなデータ視覚化の基本的な機能を提供し、Graph 拡張機能の全体ではなく一部の側面を置き換えるように設計されました。この拡張機能はウィキメディアのウィキ類向けに開発中です。開発手順の詳細は Extension:Chart/プロジェクトを参照してください。

この拡張機能は以下の図表の種類に対応しています :

折れ線グラフ
面グラフ
棒グラフ
円グラフ

インストール

Chart拡張機能（訳注：グラフ用）は、前提として拡張機能 JsonConfig がインストールしてあること、さらにグラフをレンダリングする Chart Renderer JavaScript ライブラリ（実態は TypeScript）のダウンロードも必要です。

セットアップの解説完全版はリポジトリにおいてある README.md ファイルを参照してください。

ウィキメディアの制作用に使う場合は、サービスの展開に関して全般的な指示を wikitech:Kubernetes/Deployments で確認しましょう。

使い方

図表を画像化するには、どのデータ情報源をグラフ化したいのか、グラフ定義を決めなければなりません。グラフの定義は、わりあいに簡略な 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

JavaScript の Date.parse() 機能が解析可能なら、文字列が10文字超でも機能するかもしれませんが、公式のサポート外です。

表データの1列目で日付を検出すると、当該のウィキのコンテンツ言語に応じて自動で日付の書式を地域化。

{
    "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 軸に日付を設定したグラフと表形式のデータの相関：

日付の対応は、詳細が gerrit の日付の対応 ADR にあります。

カスタマイズ

生データ

Hex colors は10件を利用可能。

現状、グラフのカスタム化には制限がかかっています。今後の期待として、テストと評価と協議の終了後、使いやすさやデバイス固有の処理、あるいは安全性を犠牲にせずにカスタム化を実現する解決法も見つかると期待されます。

サイズ調整

現状でグラフは、それをおいたコンテナ枠の横幅いっぱいを占めます。

最終的な目標は、どのデバイスで読んでもグラフ表示を読みやすくすることです。詳細は、T376845 を参照してください。

テーマの処理

現状でグラフ類の配色は既定の単一パレットに限定してあります。このパレットは使いやすさに配慮して慎重に設計してあります。色の組み合わせを考えるなら T369863 が参考になります。

グラフには特定の配色テーマが必要なものもあり、一例として複数の政党を表現する場合などです。このタイプのカスタマイズには、どうすれば使いやすさのニーズ（色覚異常など）を備えた読者の能力を損わずに最も適切に対応できるか、依然として未解決の問題が残っています。

留意点

ご注意：現在、グラフの SVG 出力は書式設定 TemplateStyles を使ってレンダリングしますが、安定的とは見なされない理由として、関連する SVG 要素のスタイル設定はいつ変更されてもおかしくない点に注意してください。グラフ類の外観を変更するには CSS 依存をやめないと、将来的にグラフが機能しなくなったり、フォントの大きさを変更するアクセシビリティ機能やダーク・モードなど、機能に支障をきたす可能性があります。

国際化

グラフは、それを置くウィキの本文用言語のみ埋め込みが可能です。そのため、例えばクエリの文字列の "uselang"（例：?uselang=es）はグラフに影響しません。

グラフ形式は、題名やラベルなど文字列の定義にさまざまな言語で対応するため、同じグラフをさまざまな言語のウィキで使用できます。この例を参照すると、スペイン語版ウィキで表示したグラフの複数言語対応が理解できます。

既知の問題点

グラフにフィルタをかけた表示は Phabricator のボードで確認してください。

グラフの種類

データはすべてのグラフで列に配置され、1列目が x-axis（x軸）を表し、次の列が y-axis（y軸）の系列またはカーブを表すと想定しています。

折れ線グラフ

生データ

折れ線グラフの見本。

以下の例では、{{#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>

その結果は：

生データ

面グラフ

生データ

円グラフ

円グラフとはグラフの1種であり、正しく表示できるように時には元データをあらかじめ加工しておく必要があります。

データを加工するときは、数値以外の列（例：x軸）は無視され、行全部の合計値をグラフに表示。

一例として複数の日付における AとB、Cの値が複数の列に置いてある場合、例えば1月1日と1月2日分だとすると、円グラフの A の部分はそれらの日付に対する A の合計値を示します。

生データ

既存のグラフを検索

ウィキメディア・コモンズにあるグラフ類は、記事ページで使えて、メディアウィキのカテゴリ経由で追跡できます。

このクエリをプロキシ代わりに使うと他の人が作成したチャートを検索したり、翻訳に貢献したり、チャート作成に使えるタブの解説文探しができます。

いずれかのウィキ由来のグラフを使うウィキの一式をまとめたカテゴリの名称は、 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 につないでください。

グラフ拡張機能から移行するには

それぞれの言語版で機能不全のグラフがあるウィキペディアのページというカテゴリを開き、形式が古いためチャート拡張機能にインポートが必要なものに目を通してください。しかしながら新しいグラフで置き換えるのではなく、すでにグラフを除去してしまったところが複数、見られます。この一覧は、テンプレートをそのカテゴリに追加し、他言語でも対応した2023年時点の英語ウィキペディアでグラフが無効な2万3811記事のうち上位200ページと比較対照してみてください。

技術的な説明文書

Extension:Graph 関連の問題が提示され、新しい拡張機能に代替するなら信頼と自信を築くと期待して、関連する全ての決定事項を慎重に検討しました。

現状では技術面の決定は /doc/adr フォルダ内のコードリポジトリに記録してあります。

エラーの監視

うまくいかなかった .chart ページは自動で commons:Category:Pages using the Chart extension with rendering errors に保存します。形式に誤りのあるグラフ入りのウィキページは、それぞれの言語版単位でCategory:レンダリングエラーが発生するグラフ拡張機能を採用したページに自動的に分類されます。

クライアント側のグラフレンダリングにエラーが発生すると、ログを logstash に記録する予定です。（開発者限定。）

グラフ作成用のツール

グラフとそのデータの一部を自動で作成および編集する方法は次のようにいくつか考えられます。

graphDataImport というスクリプトをWebブラウザで使うと、既存のグラフから形式はウィキ文でもその他でも既存のデータを抽出して、それをに.tabページに変換、.chartで定義して新しいウィキ文を与えます。
生成 AI を用いて既存のグラフのウィキコードや表からデータを抽出させ、それぞれ.tabと.chartページに変換してから指定に合わせて新しいウィキコードを生成します。また題名の訳文を与えたり、 .tabページを新データで拡張し更新することもできます。
TabularImportExport ガジェットを使うとファイルをエクセルや .csv 形式から .tab ページに双方向に変換が可能です。有効にするには、コモンズの個人設定で指定してください。
JSON のテーブルとして編集利用者インタフェースは（Jsonconfig 拡張機能の一部として）編集ページ .tab から入手できます。
ボットによっては定期的にウェブ、またはウィキペディアの既存のグラフ類から統計を取得し、要請.があった場合に.tab もしくは .chart のページに取り込むことが可能です。 DPLA ボットと SLiuBot はその種のボットに含まれます。
GraphBot は英語版ウィキペディアのグラフを表にポートします。

インストール

使い方

表形式データから採用する日付

カスタマイズ

サイズ調整

テーマの処理

留意点

国際化

既知の問題点

グラフの種類

折れ線グラフ

棒グラフ

面グラフ

円グラフ

既存のグラフを検索

グラフ拡張機能から移行するには

技術的な説明文書

エラーの監視

グラフ作成用のツール

関連項目