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
Extension:Graph/Demo/Dendrogram



時間線
{ "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格式的地圖數據. 在標籤中，可以使用 來為國家/地區增添顏色.

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

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

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



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



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

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





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



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



直接嵌入
下面是一個利用包含JSON圖表的標籤的例子.

{ "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"} }     }    }  ] }

<span id="Horizontal_bar_graph">

水平長條圖
Extension:Graph/Demo/HorizontalBarGraphSample

<span id="Editing_graph_data">

編輯圖表數據
如果頁面直接嵌入$1標籤，可以在視覺化編輯器中編輯圖表；如果要手工編輯JSON，在複製－貼上至頁面之前，建議使用JSON檢查器或JSON編輯器. 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.