Extension:图表/范例
這個頁面顯示一些由Graph 所產生的範例。 圖表的基礎技術由Vega grammar(documentation)實現。 Vega 團隊正在改善other tools,使圖表能夠更容易使用。 this tutorial解釋如何使用互動式圖表、 而Vega examples提供一些建構圖表的想法。
圖表模板
透過一些已製作好的模板,如Template:Graph:Chart (在许多维基百科上都可以找到)、或更专业的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 https://vega.github.io/editor/#/examples/vega/global-development
Extension:Graph/Demo/Airports
From https://vega.github.io/editor/#/examples/vega/airport-connections
Extension:Graph/Demo/OverviewDetail
From https://vega.github.io/editor/#/examples/vega/overview-plus-detail
Extension:Graph/Demo/IndexChart
From https://vega.github.io/editor/#/examples/vega/stock-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/CartesianTree
放射型樹狀圖
Extension:Graph/Demo/RadialTree
樹形圖
Extension:Graph/Demo/Dendrogram
時間線
地圖
這將嵌入Extension:Graph/Demo/Map。
該页面上<graph>
标签的JSON数据指定其countries
数据来自一个单独的URL,即Extension:Graph/Demo/RawData:WorldMap-iso2-json,该URL包含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
函式從Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv頁面(CSV格式)中提取2010年那一列的數據,然後將這些數據當作第一個未命名的參數並提供給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>
標籤的例子。
編輯圖表數據
手工编辑JSON既麻烦又容易出错,因此在将JSON复制并粘贴到维基页面之前,应使用JSON检查器(如JSONLint )或JSON编辑器(如Vega Live Editor )来编辑JSON。
如果<graph>
标签的数据直接嵌入页面(如上面的例子),那么如果使用VisualEditor编辑页面,就可以直接编辑图表数据。