Extension:Graph/Guide/ja

このページは、 拡張機能を使用する成功事例を記述する、コミュニティ向けページです. も参照してください.

グラフを記事部分から分離する
記事の一部としてグラフを埋め込むことはできるものの、別個のテンプレートとして保存するほうが実際的です. 例えばTemplate:Graph:&lt;yourgraphname&gt;を使用すると以下のコードで埋め込めます

グラフをカスタム化できるようにする
グラフの設定を直接、グラフ自体に埋め込めるものの、一般には設計としてよくありません. グラフは柔軟なテンプレートとして作成する必要があり、さまざまなどんなデータセットでも書式でも使えて、複数の記事に再利用できるものが求められます. たとえばグラフの幅と高さはサンプルのようにハードコードできます：

しかしながら、簡単にカスタマイズできるように、既定値を設定したテンプレートのパラメーターとして作成する必要があります:

データはグラフと分離して保存

 * 上記の書式設定で見たように、データ自体はグラフ内に保存できません. 例えば大きな表がありグラフが有効なページの一例として、高額な絵画の一覧（英語版）があり、データを複雑に組み合わせた表を使っています.

グラフを作成する簡単な手法としては、まず必要なデータの抽出から始まり、そのデータを表組みの隣にグラフとして配置します. 確かにこれでもグラフは作れますが、同じページに同一のデータが2組載る点、値が変わるとどちらも更新が必要な点で、最善の策とはいえません. あるいはまた、グラフが本文に埋め込んである場合、記入したグラフのコードやデータのせいで記事が長くなり - 編集できる人の数を制限してしまいます. その点、グラフを独立したテンプレートとして作成すると、今度は、データ更新のときにそのテンプレートの更新を忘れてしまう恐れがあります.

ここで取上げた適切な解決法とは、時間が経ってもパスの管理がしやすく、当初は使いづらいかもしれませんが、同様のリストに再利用できるものを作ることです.


 * 1) 生データと別のページを、できるだけJSON形式で設定. そのファイルの構造は、リストに載せるデータに合わせる.
 * 2) 生データをwikiテーブルに変換するためにLuaモジュールを作成し、整形式の整った形に整形する関数を持たせる.
 * 3) 同じLuaモジュールを使ってグラフに必要なデータを抽出、別の関数を作成してJSON形式のデータとして出力.
 * 4) グラフ用テンプレートを作成、上記のデータを取り込んでプロットする
 * 5) 最後に、以下の2つのスニペットを一覧のページに挿入.

データをきれいに整った「表」に変換するスニペット.

同じデータを「グラフ」に変換するスニペット.

外部データ
グラフのデータはグラフの定義に埋め込むか、 リンクで提供します. 標準版のVegaと異なり、グラフのタグはカスタムのウィキ プロトコルのひとつを外部リンクに当てます:


 * - Gets tabular dataset from Commons. Should be used with  (or "meta" or "fields"). The data given to the graph is already localized to the wiki language.

For example, this dataset would be given to the graph in this format:


 * - Gets map dataset from Commons. Should be used with  (can also use "meta" to get the same information as for tabular). The data given to the graph is already localized to the wiki language.
 * - Gets File:Einstein_1921.jpg image from Commons for an image mark. It is always recommended to add  (and/or height) to make the image the right size and reduce server load.
 * OBSOLETE, use wikifile: instead  - グラフに使う画像を、例えばコモンズから取得. このタグはアップロードによるコンテンツなら何でも指定できます. * クエリ変数のないドメイン名. ファイルパスを得たり画像をオプションのサイズに設定するには、filepathマジックキーワードを使用.
 * - ウィキページの生のコンテンツを入手し、パスをそのページのタイトルに設定します. ドメイン名はオプションなのですが、名前を付ける場合はウィキメディアがホストする、たとえばen.wikipedia.org、commons.wikimedia.orgなどの天文のサイトから選んでください.
 * - データをMediaWiki APIから転写します. ドメイン名はオプション.
 * - RESTbase APIを読み込みます. ドメイン名はオプション.
 * or  - 指定された地域の地形を（topojsonとして）取得するには、Wikidata IDまたはURLエンコードされたクエリ（入手先はSPARQL）を使用して、取得する地形を「id」で特定します.
 * - 左記のコードで地図のスクリーンショット・サービスにリンクを作り、必要な場所・縮尺・サイズに合わせて静的な地図を描画します. パラメータはそれをスクリーンショット画像に変換するよう、Kartotherianに働きかけます - https://maps.wikimedia.org/img/{style},{zoom},{lat},{lon},{width}x{height}@2x.png

Examples of charts with external data
To see working example of graph json which uses external data it is possible to use Template:Graph:Lines and Template:Graph:Stacked template's debug= parameter. For example below template invocation

will produce following graph consistent json

注意点：入れ子のテンプレートのパラメータ
テンプレートは原則として、入れ子にするときに半角1文字以上で仕切ります. さもないとグラフは表示すらされず、構文エラーが発生します. ご注意ください.

"values": // will not render "values": // will render, notice the whitespace in the closing braces

グラフに波カッコを使うには
Vega2は などテンプレートのパラメータをサポートしますが、MediaWikiはまず「indexDate」テンプレートを検索し、参照読み込みします. これを防ぐには、開く波カッコを\u007bに、閉じる波カッコを\u007dに、またパイプ記号「 」（|）は | に置換します":

バグの解消

 * 表の試作とバグ修正を行うには、グラフのサンドボックス Graph Sandbox が最適です. JSON コードをサンドボックスに転写すると、キー入力に連れてグラフ表示が変化する様子が分かります. json のコメントを使用でき、ウィキマークアップも展開されます. 画面の右下に変換後の JSON が表示されます.
 * テンプレートからグラフ JSON を取り出すには、編集/確認プレビューを開き、ブラウザーのデバッグ機能 (表示されなくても) を使ってグラフを検証してください - $code が表示されます. ハッシュ値をコピーして (Chrome で) Esc キーを押し、この 1 行を入力して JSON を表示します. 文の最初と最後の引用符を削除し、上記の Vega エディターにコピー/貼り付けをします.
 * To get the graph JSON from a template, while the graph is being displayed, use the following oneliner in the browser's debugger console (hit to show the JSON. If there is more than one graph on the page, increment the  until you get the one you want. Remove first and last quote, and copy/paste to the Vega editor above.


 * You can also use browser's debugger to inspect the graph you are interested in (even if it is not showing) - you should see something like . Copy the hash value, hit escape (in Chrome), and use this oneliner to show the JSON (replacing the shown hash value with your own). Remove first and last quote, and copy/paste to the Vega editor above.