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 介面
這個圖表顯示頁面的編輯歷史（依使用者名稱）. 参见.

This graph shows the number of pages in each subcategory. See graph source code.

Using Wikidata Query Service API
See more examples.

Cartesian tree
Extension:Graph/Demo/CartesianTree

Radial tree
Extension:Graph/Demo/RadialTree

Dendrogram
{ "width": 500, "height": 50, "data": [ {     "name": "tree", "values": [ {"A": "Mammal","B": "Herbivore","C": "Cow" }, {"A": "Mammal","B": "Herbivore","C": "Goat" }, {"A": "Mammal","B": "Omnivore","C": "Human"}, {"A": "Mammal","B": "Omnivore","C": "Bat"}, {"A": "Fish","B": "Carnivore","C": "Shark"}, {"A": "Fish","B": "Carnivore","C": "Electric Eel"}, {"A": "Fish","B": "Omnivore","C": "Piranha "}, {"A": "Fish","B": "Omnivore","C": "catfish "} ],     "transform": [ {"type": "treeify","groupby": ["A","B"]}, {         "type": "hierarchy", "mode": "cluster", "nodesize": [11,200] },       {          "type": "formula", "field": "align", "expr": "datum.children ? 'right' : 'left'" },       {          "type": "formula", "field": "offset", "expr": "datum.children ? -5 : 5" }     ]    }  ],  "marks": [ {     "type": "path", "from": { "data": "tree", "transform": [ {"type": "filter","test": "datum.parent"}, {           "type": "linkpath", "sourceX": "parent.layout_y", "sourceY": "parent.layout_x", "targetX": "layout_y", "targetY": "layout_x", "shape": "cornerX" }       ]      },      "properties": { "enter": { "path": {"field": "layout_path"}, "stroke": {"value": "#ddd"} }     }    },    {      "type": "text", "from": { "data": "tree", "transform": [ {           "type": "formula", "field": "ff_node_label", "expr": "if(datum.layout_depth == 0, 'Animals', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.B, if(datum.layout_depth == 3, datum.C, ''))))" }       ]      },      "properties": { "enter": { "x": {"field": "layout_y"}, "dx": {"field": "offset"}, "y": {"field": "layout_x"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 10}, "align": {"field": "align"}, "baseline": {"value": "middle"}, "fill": {"value": "#000"}, "text": {"field": "ff_node_label"} }     }    }  ] }

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

More maps examples
This transcludes the page Extension:Graph/Demo/Map. The  tag's JSON data on that page specifies that its   data comes from a separate URL, Extension:Graph/Demo/RawData:WorldMap-iso2-json, that contains map data in JSON format. (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.)

One of the elements in the  tag's JSON data specifies a highlight color for each country, in the format  :

Vega usually works with data in the format, so I created a helper Lua function to convert the data:

The Lua function's output is data in Vega's format:

Here is a more complex data processing example: MapTemplate is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on UN data). To generate this graph, I use Lua module Graph:Utils's function  to extract the year 2010 column from the Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv page (in csv format), and pass that data as the first unnamed parameter to the MapTemplate graph. Additional optional parameter specifies that it should be scaled to 80%.



Note how the legend it wrongly positioned. That won't happen at lower scales.

Passing MediaWiki template parameters
If you're using a wiki page as a template, you can pass parameters to it, like any other MediaWiki template.

As an example, the graph specification in TemplateSample does not hardcode a fill color for ; instead it sets the fill color to. So if you visit that page or transclude it with no parameter, the graph fills with color  ; but if you transclude that page you can specify the fill color as the first template parameter.



Using a template for repeated graphs
This is very useful if you have multiple graphs of the same form: you can put the verbose graph JSON and additional repetive wikitext in a template and only pass the parameters to it that vary, such as title and values. See a sample of this approach.

Overlaying two types of data
Falkensee graph sample, see code.

Embedded directly with
This example is a  tag containing the graph JSON inside the current page.

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

Horizontal bar graph
Extension:Graph/Demo/HorizontalBarGraphSample

Editing graph data
Editing JSON by hand is fiddly and prone to error. so you should use a JSON checker such as JSONLint or a JSON editor such as the Vega Live Editor to edit JSON before you copy and paste it into the wiki page. 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.