Extension:Graph
![]() リリースの状態: 安定 |
|
---|---|
実装 | タグ , ContentHandler |
説明 | データ駆動グラフ |
作者 | |
MediaWiki | >= 1.40.0 |
ライセンス | MIT ライセンス |
ダウンロード | |
|
|
Quarterly downloads | 164 (Ranked 62nd) |
Public wikis using | 960 (Ranked 261st) |
translatewiki.net で翻訳を利用できる場合は、Graph 拡張機能の翻訳にご協力ください | |
問題点 | 未解決のタスク · バグを報告 |
Graph (グラフ) 拡張機能は、<graph>
タグでデータの画像化をJSONで記述しレンダリングします。棒グラフ、円グラフ、タイムテーブル(年表)やヒストグラム(demo)をVega宣言型プログラミングで生成します。
全般的な情報
Graph 拡張機能は強力な Vega ベースのグラフをウィキページに加えます。グラフは対話的なものにできます。
もっとも簡便にグラフを追加するには、既存の{{Graph:Chart}}などのテンプレートを使います。 これらのテンプレートはVegaの複雑さを見ずに済みます。 熟練の利用者ならグラフ用サンドボックスでグラフが作成できます。 グラフのサンドボックスでは、JSON に加えてウィキのテンプレート構文を使用できます。 The extension integrates with VisualEditor, providing a simple tool/wizard which generates basic graphs, by entering values directly to the editor.
有用なリンク
- Vega 2ドキュメント - 復元されたVega 2ドキュメントページ。
- Guide - ウィキでグラフを使う方法の標準的な推奨。
- Interactive Tutorial - ゼロから複雑でインタラクティブなグラフ完成まで、段階的に解説する説明書。
- デモページ - 多くのサンプルと使い方のトリックを紹介します。
- TechTalk 動画 - ウィキメディア財団技術部門の議論。Graph 拡張機能を取上げ、Lyra エディターを分かりやすくデモしている (labsにも合わせてインストールする)。
- 興味があれば、Vegaの将来的な機能の動画も参照できる(Jeffrey Heerの基調講演)。
- 開発者のための Vega 解説 - Vegaのリソースを探すならこちらが最適。
- Vega 2.0 への移行
- 対話的な Vega の紹介動画
インストール
- JsonConfig 拡張機能が必要
- ダウンロードして、ファイルを
extensions/
フォルダー内のGraph
という名前のディレクトリ内に配置します。 - 以下のコードを
LocalSettings.php
の末尾に追加します:wfLoadExtension( 'Graph' );
- 完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。
Vagrant installation:
- Vagrant を使用している場合は、
vagrant roles enable graph --provision
でインストールしてください。
追加設定のセットアップ
en.wikiのような本番環境を複製したい場合、以下のステップを実行する必要があります。
ルール (Vagrantを使用することにした場合のみ)
- graphsロールを有効にする
- scribuntoロールを有効にする
- imagemapロールを有効にする
テンプレートとLuaモジュール
- Module:Graph をローカルにコピーする
- Module:Graph/doc をローカルにコピーする
- Template:Nowrap をローカルにコピーする
- Copy Template:Nowrap/styles.css locally
- Module:Chartをローカルにコピーする
- Module:Chart/Default_colors をローカルにコピーする
- File:Circle_frame.svg をローカルにコピーする
表の例
サンプルや使用法の裏技はデモのページ を参照してください。
利用者定義のフォールバック
クライアント サイドのレンダリングを使用する場合、noscript
利用者に静的なフォールバック画像を提供するためにウィキメディア コモンズが使用できます。
これは、サーバーサイドレンダリングを提供するために新しいサービスが実装されるまでの一時的な対処です。
利用者は最初に静的なグラフをウィキメディア コモンズにアップロードする必要があります。
フォールバック画像には2つの変数 fallback
と fallbackWidth
があります。
fallback
はWikimedia Commonsのファイル名に対応します。
fallbackWidth
はフォールバック画像の幅のピクセル数です。
これらの変数は以下の方法でグラフを通して渡されます。
<graph fallback="Graph test seddon.png" fallbackWidth=450>
Module:Graphのようなluaモジュールを使用する場合、これらの変数はタグ関数で提供することができます。 Template:Graph:Chart を適応させると、こんな感じになります。
{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} | fallbackWidth= {{{fallbackWidth|''}}} }}
そして、次のような形でテンプレートに活用されることになる。
{{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|fallback=Graph test seddon.png|fallbackWidth=450}}
fallbackWidth が提供されず、画像が定義されている場合、拡張機能は提供されたグラフ幅から幅を導きます。 その理由は、レンダリング画像の幅と実際の画像の幅に差が生じることが多いからです。
{{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|fallback=Graph test seddon.png}}
外部データ
HTTP(S)を使ってグラフのデータを取得することはできません。
代わりにwikiraw:
やwikiapi:
等、固有のウィキ・プロトコルを使用してください。
Graph 拡張機能は GraphAllowedDomains
設定を用いてプロトコルの解決を設定します:
Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph. In these cases the graph will end up empty (see phab:T168601).
$wgGraphAllowedDomains = [
# http + httpsキーで外部のデータアクセスが認められるドメインをすべて一覧にします。
# ここに列記したドメインはサブドメインもすべて容認します。
# 〈wikiraw〉のような特製のプロトコルは、どのプロトコルを選ぶべきか調べるために用います。
# こうするとwikiraw://en.wikipedia.org/Pageはhttps://en.wikipedia.org/w/api.php?action=query&titles=Page&...を呼び出すapiのリクエストになる
'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
'http' => [ 'wmflabs.org', ... ],
# wikirawuploadに用いることが承認されたドメイン一覧: プロトコルにアクセス。
# 完全一致のみ。サブドメインは対象外。
'wikirawupload' => [ 'upload.wikimedia.org' ],
# wikirawuploadと同値だがウィキデータSparqlクエリ用
'wikidatasparql' => [ 'query.wikidata.org' ],
];
既知のバグと制限
- phab:tag/graph - Graph 拡張機能のバグ
- ISO 8601タイムスケールの実装に失敗。したがってタイムラインではグレゴリオ暦のみ使用可能。
内部リンク
解析をすると、Graph 拡張機能はテンプレートのパラメーター/式をすべて展開し、グラフのハッシュを識別子に使うと完全なグラフ定義を ParserOutput ページのプロパティとして保存します。
The graph extension adds HTML to the page where graphs should go, a <div>
with a graph-id as the attribute.
サンプル:
<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>
Graph 拡張機能は ResourceLoader の JavaScript モジュールとして Vega ライブラリを含むページに ext.graph
を呼び込み、グラフ定義の JSON を通称 wgGraphSpecs
と呼ばれる JavaScript mediawiki.config
変数に組み込みます。
このモジュールがクライアントのブラウザに読み込まれると、Vega JavaScriptライブラリは<div>
を個別のHTMLキャンバスに取り込み、その中にグラフを描画すると静止画像と置き換えます。
セキュリティ機能
信用できないデータソース参照を許可しないように、<graph>
を設定できます(例: ウィキメディアではウィキメディアのサイト内のデータのみ許可)。
ライセンス
VegaライブラリはBSDライセンスの修正版容認の範囲で使用できるものとして配布されます。
“ | BSDライセンスの複写に(容認できる範囲の)微調整を加えたようにも見えます。 使用に際して問題はありませんが、このような変更をライセンスに加えないと理想的です。 ライセンスがオープンソースの使用について安全かどうかという(このような)混乱を防ぐためにも、ライセンス条件にこのような改変を行うことは好ましくありません。 | ” |
—Stephen LaPorte |
設定
wgGraphAllowedDomains
See the section on external data.
その他の変数
- - wgGraphUrlBlacklist 変数が 787d64a11 で除去されました
- - wgGraphDataDomains が e0813f85a で除去されました。 代わりに wgGraphAllowedDomains を使用してください。
- - wgGraphUserServiceAlways が b735f63ff4b で除去されました。
- - wgGraphIsTrusted が cf80f43e15 で除去されました。
- - $wgGraphImgServiceUrl が廃止予定になりました
グラフ名前空間の有効化
JsonConfig を設定すると、グラフの設定を単独ページとしてそれぞれの名前空間に保管できます。
// See https://www.mediawiki.org/wiki/Extension:JsonConfig
$wgJsonConfigModels['graph.jsonconfig'] = 'graph\Content';
$wgJsonConfigs['graph.jsonconfig'] = array(
'namespace' => <PICK-A-NS-NUMBER>,
'nsName' => 'Graph',
'isLocal' => true,
);
ビジュアルエディターのモジュール
2015年の夏以降、Graph 拡張機能にはビジュアルエディターを使ってグラフを編集するモジュール (ext.graph.VisualEditor) が付与されました。
このモジュールは「Google Summer of Code 2015」プロジェクトの成果です。 詳細は phab:T89287 を参照してください。
利用者はこのモジュールを使い、外部の拡張機能ノードに頼らずとも、VisualEditor内でグラフを見ることができます。 ユーザーはさらに、グラフの形式、データやパディングを編集するダイアログを開くことができます。 ユーザーインタフェース(UI)ではさらに、ウィキテキスト・エディターに切り替えなくてもビジュアルエディター上でグラフの生JSON定義を直接、編集できます。熟練したユーザーなら、これを使ってUIのサポートしない設定の微調整も可能です。
この第1ステップは、ビジュアルエディター内でどのようなグラフ編集ができるかという試金石になり、またモジュールとして改善したり伸展する方法が十分にあります。
この拡張機能は 1 つ以上のウィキメディアのプロジェクトで使用されています。 これはおそらく、この拡張機能が安定していて高いトラフィックのウェブサイトでも十分に動作することを意味します。 この拡張機能がインストールされている場所を確認するには、ウィキメディアの設定ファイル CommonSettings.php および InitialiseSettings.php 内で、この拡張機能の名前を探してください。 特定のウィキにインストールされている拡張機能の完全な一覧は、そのウィキの Special:Version ページにあります。 |
壊れたグラフのトラブルシューティング
グラフを含むエラーは、開発者コンソールに記録されます。
Error: Bad constructor arguments (phab:T277906)
修正方法 filepath:Earthmap1000x500compac.jpg を filepath:Earthmap1000x500.jpg に置き換える。
例.
TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
To fix: Make sure you have not set default as null
関連項目
- Extension:GraphViz — エッジ(枝)で結ばれた複数のノード(頂点)のグラフを表示(このページで解説した拡張機能の表形式ではない)
- Plotly — オープンソースのJavaScriptグラフ作成ライブラリ(3D作表も可能)
- D3 — データ駆動型ドキュメント
この拡張機能は以下のパッケージ/ウィキファームに含まれています: This is not an authoritative list. Some wiki farms/hosts may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm. |