MediaWiki

Extension:Graph

This page is a translated version of the page Extension:Graph and the translation is 78% complete.
Languages:
MediaWiki 拡張機能マニュアル
Graph
リリースの状態: 不安定
実装 タグ , ContentHandler
説明 データ駆動グラフ
作者
MediaWiki >= 1.41
ライセンス MIT ライセンス
ダウンロード
拡張機能をダウンロード
Git [?]:
パラメーター
  • $wgGraphDefaultVegaVer
  • $wgGraphAllowHttp
  • $wgGraphAllowedDomains
使用するフック
Quarterly downloads 48 (Ranked 110th)
Public wikis using 884 (Ranked 281st)
translatewiki.net で翻訳を利用できる場合は、Graph 拡張機能の翻訳にご協力ください
問題点 未解決のタスク · バグを報告

Graph (グラフ) 拡張機能は、‎<graph>タグでデータの画像化をJSONで記述しレンダリングします。棒グラフ、円グラフ、タイムテーブル（年表）やヒストグラム（demo）をVega宣言型プログラミングで生成します。

全般的な情報

Graph 拡張機能は強力な Vega ベースのグラフをウィキページに加えます。 グラフは対話的なものにできます。

もっとも簡便にグラフを追加するには、既存の{{Graph:Chart}}などのテンプレートを使います。 これらのテンプレートはVegaの複雑さを見ずに済みます。 熟練の利用者ならグラフ用サンドボックスでグラフが作成できます。 グラフのサンドボックスでは、JSON に加えてウィキのテンプレート構文を使用できます。 この拡張機能はVisualEditorと統合されており、エディタに直接値を入力することで基本的なグラフを生成するシンプルなツール/ウィザードを提供します。

有用なリンク

インストール

  • JsonConfig 拡張機能が必要
  • ダウンロードして、ファイルをextensions/フォルダー内のGraphという名前のディレクトリ内に配置します。
    Developers and code contributors should install the extension from Git instead, using:cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph
  • 以下のコードを LocalSettings.php ファイルの末尾に追加します: 
    wfLoadExtension( 'Graph' );
  •   完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。


Vagrant installation:

  • Vagrant を使用している場合は、vagrant roles enable graph --provisionでインストールしてください。

追加設定のセットアップ

en.wikiのような本番環境を複製したい場合、以下のステップを実行する必要があります。

Debugging graphs and porting graphs from Vega 2 to Vega 5

A sandbox is provided at Special:GraphSandbox that works similar to the Vega graph editor. The MediaWiki tool includes compatibility code that maps older Vega schemas to the currently enabled version. Inserting an old schema in the main text area will print a modified and modernized schema underneath the graph where possible.

Similar to vega.github.io/editor, the Vega object can be inspected via the VEGA_DEBUG JavaScript global. See Vega's debugging guide on how to use it.

Migrating schemas from older Vega versions

Previously Graph supported Vega 2. You can paste the JSON of graphs in http://vega.github.io/vega-editor/?mode=vega to see how they previously rendered for comparison with Vega 5.

Special:GraphSandbox (for latest code see the beta cluster version of the sandbox) can be used to map older schemas to new schemas. Copy the old schema into the main textarea and the updated schema will appear in the text area below the graph. Copy the new schema into your code.

表の例

サンプルや使用法の裏技はデモのページ を参照してください。


利用者定義のフォールバック

クライアント サイドのレンダリングを使用する場合、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' ],
];

内部リンク

解析をすると、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.

ビジュアルエディターのモジュール

2015年の夏以降、Graph 拡張機能にはビジュアルエディターを使ってグラフを編集するモジュール (ext.graph.VisualEditor) が付与されました。

このモジュールは「Google Summer of Code 2015」プロジェクトの成果です。 詳細は phab:T89287 を参照してください。

 

利用者はこのモジュールを使い、外部の拡張機能ノードに頼らずとも、VisualEditor内でグラフを見ることができます。 ユーザーはさらに、グラフの形式、データやパディングを編集するダイアログを開くことができます。 ユーザーインタフェース（UI）ではさらに、ウィキテキスト・エディターに切り替えなくてもビジュアルエディター上でグラフの生JSON定義を直接、編集できます。熟練したユーザーなら、これを使ってUIのサポートしない設定の微調整も可能です。

この第1ステップは、ビジュアルエディター内でどのようなグラフ編集ができるかという試金石になり、またモジュールとして改善したり伸展する方法が十分にあります。

壊れたグラフのトラブルシューティング

グラフを含むエラーは、開発者コンソールに記録されます。

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

Example.

関連項目

  • Plotly — オープンソースのJavaScriptグラフ作成ライブラリ（3D作表も可能）
  • D3 — データ駆動型ドキュメント
Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:Graph/ja&oldid=6204984"