Extension:Graph/Demo/zh

這個頁面顯示一些藉由扩展:图表所產生的範例. 圖表的基礎技術由Vega grammar（documentation）實現. Vega 團隊正在改善other tools，使圖表能夠更容易使用. this tutorial解釋如何使用互動式圖表、 而Vega examples提供一些建構圖表的想法.

圖表模板
透過一些已製作好的模板（如Graph:Chart、Graph:PieChart），可以快速的輸出圖表. 例如：Graph:Chart支援常見的長條圖、圓餅圖和區塊圖.



Vega 2.0 互動式圖表範例
參見互動式圖表製作教程以了解如何製作互動式圖表.

Extension:Graph/Demo/Dimpvis

Extension:Graph/Demo/Airports

Extension:Graph/Demo/OverviewDetail

Extension:Graph/Demo/IndexChart

RESTBase 介面
使用網頁綜合瀏覽分析介面，可顯示選取日期內頁面瀏覽次數. 參見.

最近30天內此頁面（上）及英文維基百科首頁（下）瀏覽量

最近30天內此頁面（上）及英文維基百科首頁（下）瀏覽量（瀏覽裝置類型）

MediaWiki 介面
這個圖表顯示頁面的編輯歷史（依使用者名稱）. 參見.

這個圖表顯示子分類的頁面數量. 詳細內容請參見圖表原始碼.

維基數據查詢（Wikidata Query Service）介面
詳細內容請參見更多範例.

笛卡爾樹
Extension:Graph/Demo/CartesianTree

放射型樹狀圖
Extension:Graph/Demo/RadialTree

Dendrogram
{ "width": 500, "height": 50, "data": [ {     "name": "tree", "values": [ {"A": "Mammal","B": "Herbivore","C": "Cow" }, {"A": "Mammal","B": "Herbivore","C": "Goat" }, {"A": "Mammal","B": "Omnivore","C": "Human"}, {"A": "Mammal","B": "Omnivore","C": "Bat"}, {"A": "Fish","B": "Carnivore","C": "Shark"}, {"A": "Fish","B": "Carnivore","C": "Electric Eel"}, {"A": "Fish","B": "Omnivore","C": "Piranha "}, {"A": "Fish","B": "Omnivore","C": "catfish "} ],     "transform": [ {"type": "treeify","groupby": ["A","B"]}, {         "type": "hierarchy", "mode": "cluster", "nodesize": [11,200] },       {          "type": "formula", "field": "align", "expr": "datum.children ? 'right' : 'left'" },       {          "type": "formula", "field": "offset", "expr": "datum.children ? -5 : 5" }     ]    }  ],  "marks": [ {     "type": "path", "from": { "data": "tree", "transform": [ {"type": "filter","test": "datum.parent"}, {           "type": "linkpath", "sourceX": "parent.layout_y", "sourceY": "parent.layout_x", "targetX": "layout_y", "targetY": "layout_x", "shape": "cornerX" }       ]      },      "properties": { "enter": { "path": {"field": "layout_path"}, "stroke": {"value": "#ddd"} }     }    },    {      "type": "text", "from": { "data": "tree", "transform": [ {           "type": "formula", "field": "ff_node_label", "expr": "if(datum.layout_depth == 0, 'Animals', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.B, if(datum.layout_depth == 3, datum.C, ''))))" }       ]      },      "properties": { "enter": { "x": {"field": "layout_y"}, "dx": {"field": "offset"}, "y": {"field": "layout_x"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 10}, "align": {"field": "align"}, "baseline": {"value": "middle"}, "fill": {"value": "#000"}, "text": {"field": "ff_node_label"} }     }    }  ] }

時間線
{ "width": 800, "height": 200, "data": [ {     "name": "people", "values": [ {"label":"Washington", "born":-7506057600000, "died":-5366196000000, "enter":-5701424400000, "leave":-5453884800000}, {"label":"Adams",     "born":-7389766800000, "died":-4528285200000, "enter":-5453884800000, "leave":-5327740800000}, {"label":"Jefferson", "born":-7154586000000, "died":-4528285200000, "enter":-5327740800000, "leave":-5075280000000}, {"label":"Madison",   "born":-6904544400000, "died":-4213184400000, "enter":-5075280000000, "leave":-4822819200000}, {"label":"Monroe",    "born":-6679904400000, "died":-4370518800000, "enter":-4822819200000, "leave":-4570358400000} ]   },    {      "name": "events", "format": {"type":"json", "parse":{"when":"date"}}, "values": [ {"name":"Decl. of Independence", "when":"July 4, 1776"}, {"name":"U.S. Constitution",    "when":"3/4/1789"}, {"name":"Louisiana Purchase",   "when":"April 30, 1803"}, {"name":"Monroe Doctrine",      "when":"Dec 2, 1823"} ]   }

], "scales": [ {     "name": "y", "type": "ordinal", "range": "height", "domain": {"data": "people", "field": "label"} },   {      "name": "x", "type": "time", "range": "width", "round": true, "nice": "year", "domain": {"data": "people", "field": ["born", "died"]} } ],  "axes": [ {     "type": "x", "scale": "x", "properties": {"labels": {"fontSize": {"value": 18}}} } ],  "marks": [ {     "type": "text", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -10}, "angle": {"value": -25}, "fill": {"value": "#000"}, "text": {"field": "name"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} }     }    },    {      "type": "rect", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -8}, "width": {"value": 1}, "height": {"field": {"group": "height"}, "offset": 8}, "fill": {"value": "#888"} }     }    },    {      "type": "text", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "y": {"scale": "y", "field": "label", "offset": -3}, "fill": {"value": "#000"}, "text": {"field": "label"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} }     }    },    {      "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "x2": {"scale": "x", "field": "died"}, "y": {"scale": "y", "field": "label"}, "height": {"value": 2}, "fill": {"value": "#557"} }     }    },    {      "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "enter"}, "x2": {"scale": "x", "field": "leave"}, "y": {"scale": "y", "field": "label", "offset":-1}, "height": {"value": 4}, "fill": {"value": "#e44"} }     }    }  ] }

地圖
這將嵌入Extension:Graph/Demo/Map. 頁面上的JSON標籤 將單獨的URL指定為一個國家/地區. 可以參考Extension:Graph/Demo/RawData:WorldMap-iso2-json所包含JSON格式的地圖數據. （MediaWiki無法將頁面格式化成JSON，所以它最終將使用JSON內容處理程序. ）

在 標籤中，可以使用 來為國家/地區增添顏色.

Vega使用 格式的數據，所以使用下方的Lua函式可以快速的轉換數據.

上方Lua函式輸出為Vega格式：

MapTemplate是Lua數據的擴展，是複雜數據的處理範例. （2010年世界人口資料來自聯合國資料） 為了產生這個圖表，首先需要由Lua模組Graph:Utils的 函式擷取RawData:PopulationByCountryHistoric中CSV格式的數據. 這些數據會被當作一個未命名參數並提供給MapTemplate. 再來使用附加參數指定其縮放比例為80%.



註：注意圖例位於錯誤的位置. 藉由小一點的縮放比例，可以消除這個問題.

傳遞Media Wiki模板參數
就像其他Media Wiki模板，將Wiki頁面當作一個模板也可以傳遞參數.

例如模板範例不會對 中的填充顏色進行寫死；它將會將填充顏色設為. 所以當模板範例嵌入時沒有參數，圖表呈現 色；但如果嵌入時帶有顏色參數，則會呈現該色.



使用重複圖表的模板
如果有許多相同形式的圖表，這將十分實用：將圖表詳細的JSON格式和附加的維基語法放在模板中，然後只傳遞其參數. （如圖表名或數值）詳細內容可參照這個範例.

疊加兩種數據
法爾肯塞的人口變化圖表. 詳細內容參見法爾肯塞圖表.

Embedded directly with
This example is a  tag containing the graph JSON inside the current page.

{ "version": 2, "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2,  "y": 55}, {"x": 3, "y": 43}, {"x": 4,  "y": 91}, {"x": 5, "y": 81}, {"x": 6,  "y": 53}, {"x": 7, "y": 19}, {"x": 8,  "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }

Horizontal bar graph
Extension:Graph/Demo/HorizontalBarGraphSample

Editing graph data
Editing JSON by hand is fiddly and prone to error. so you should use a JSON checker such as JSONLint or a JSON editor such as the Vega Live Editor to edit JSON before you copy and paste it into the wiki page. If the  tag's data is directly embedded in the page such as the example above, then if you use VisualEditor to edit the page you can directly edit graph data.