Extension:Graph/Demo/zh

Category:Pages using deprecated NoteTA template#%20

這個頁面顯示一些由Graph所產生的範例。 圖表的基礎技術由Vega grammardocumentation)實現。 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:UtilsparseCsv函式從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编辑页面,就可以直接编辑图表数据。

Category:Extension:Graph/zh#Demo
Category:Extension:Graph/zh Category:Pages using deprecated NoteTA template Category:Pages with disabled graphs Category:Pages with graphs Category:Pages with script errors