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



時間線
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 800, "height": 200, "autosize": { "type": "fit", "resize": false, "contains": "padding" },

"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": -6106032422000 },       {          "name": "U.S. Constitution", "when": -5706346022000 },       {          "name": "Louisiana Purchase", "when": -5259744422000 },       {          "name": "Monroe Doctrine", "when": -4609930022000 }     ]    }  ],  "scales": [ {     "name": "y", "type": "band", "range": "height", "domain": { "data": "people", "fields": [ "label" ]     }    },    {      "name": "x", "type": "time", "range": "width", "round": true, "domain": { "data": "people", "fields": [ "born", "died" ]     }    }  ],  "axes": [ {     "encode": { "labels": { "update": { "fontSize": { "value": 18 }         }        }      },      "scale": "x", "orient": "bottom" } ],  "marks": [ {     "type": "text", "from": { "data": "events" },     "encode": { "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" },     "encode": { "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" },     "encode": { "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" },     "encode": { "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" },     "encode": { "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格式和附加的維基語法放在模板中，然後只傳遞其參數. （如圖表名或數值）詳細內容可參照這個範例.



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



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

直接嵌入
下面是一個利用包含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="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.