扩展:图表/范例

This page is a translated version of the page Extension:Graph/Demo and the translation is 91% complete.

Outdated translations are marked like this.

Languages:

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

圖表模板

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

{{Graph:Chart|width=600|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}}

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
 |x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
 |y2=7,8,9,8,8,9,10,9,5|showValues=}}

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
 |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}

Vega 2.0 互動式圖表範例

參見互動式圖表製作教程以了解如何製作互動式圖表。

Extension:Graph/Demo/Dimpvis From http://vega.github.io/vega-editor/?spec=dimpvis

Extension:Graph/Demo/Airports From http://vega.github.io/vega-editor/?spec=airports

Extension:Graph/Demo/OverviewDetail From http://vega.github.io/vega-editor/?spec=overview+detail

Extension:Graph/Demo/IndexChart From http://vega.github.io/vega-editor/?spec=index_chart

RESTBase 介面

使用網頁綜合瀏覽分析介面，可顯示選取日期內頁面瀏覽次數。參見Template:Graph:PageViews 。

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

{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}

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

MediaWiki 介面

這個圖表顯示頁面的編輯歷史（依使用者名稱）。參見{{Graph:PageHistory}}。

本頁面	Albert Einstein （英文維基百科）

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

Category:Extensions by category.	Category:People （英文維基百科）

維基數據查詢（Wikidata Query Service）介面

詳細內容請參見更多範例。

樹狀圖

時間線

地圖

這將嵌入Extension:Graph/Demo/Map。頁面上的JSON標籤‎<graph>將單獨的URL指定為一個國家/地區。可以參考Extension:Graph/Demo/RawData:WorldMap-iso2-json所包含JSON格式的地圖數據。在‎<graph>標籤中，可以使用"country-code":"highlight-color"來為國家/地區增添顏色。

{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}

Vega使用[{"id":"country-code", "v":"highlight-color"}, ...]格式的數據，所以使用下方的Lua函式可以快速的轉換數據。

{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}

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

[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]

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

{{Extension:Graph/Demo/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}

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

傳遞Media Wiki模板參數

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

例如TemplateSample 不會對marks.properties.update.fill.value中的填充顏色進行寫死；它將會將填充顏色設為{{{1|#ccc}}}。所以當模板範例嵌入時沒有參數，圖表呈現#ccc色；但如果嵌入時帶有顏色參數，則會呈現該色。

{{Extension:Graph/Demo/TemplateSample}}
{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}

使用重複圖表的模板

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

疊加兩種數據

法爾肯塞的人口變化圖表。詳細內容參見法爾肯塞圖表。

Copied from vega demo, which was modeled on this graph.

水平長條圖

Extension:Graph/Demo/HorizontalBarGraphSample

直接嵌入`‎<graph>`

下面是一個利用包含JSON圖表的‎<graph>標籤的例子。

編輯圖表數據

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