模板:Graph:Chart/doc
![]() | 此頁面是Template:Graph:Chart的模板文件。 此頁面可能包含了模板的使用說明、分類和其他內容。 |
![]() | 此模板使用Lua語言: |
![]() | 此模板的文檔不存在、不全面或不能詳細描述其功能及/或其代碼中的參數。請幫助擴充並改進其文檔。 |
CSV2Chart
編輯如果您有來自電子表格文檔(例如LibreOfficeCalc)或統計軟件R/R-Studio的數據,您可以將它們導出為CSV文件。可以使用v:en:AppLSAC加載CSV文件,該文件能夠將CSV轉換為圖表中的數據。該列的第一行應該有標題。CSV文件的列包含浮點值或整數值。CSV2WikiChart是作為維基百科和包含數據的維基學院學習資源的支持工具而創建的。
參數
編輯創建用於顯示圖表的<graph>
JSON 對象。在文章命名空間中,應改用模板Template:Graph:Chart。有關用例,請參閱其頁面。
- width: 圖表的寬度
- height: 圖表的高度
- type: 圖表類型:
line
用於折線圖,area
用於面積圖, 和rect
用於(圓柱) 餅圖, 和pie
用於條形圖。 多個系列可以堆疊使用stacked
前綴,例如stackedarea
。 - interpolate: 插值折線圖和面積圖的方法。建議使用
monotone
單調三次插值 –進一步支持的值列在github.com /vega /vega /wiki /Marks #area。 - colors: 圖表的色盤,顏色之間用半形逗號
,
分隔。顏色的值須以#rgb
或#rrggbb
或#aarrggbb
或CSS色名表示。#aarrggbb
格式中,aa
值為Alpha通道,即FF
表示100%不透明,80
表示50%不透明/透明,餘可類推。(預設色盤是category10
)。 - xAxisTitle 和 yAxisTitle: 分別是x軸和y軸的標題
- xAxisMin, xAxisMax, yAxisMin, and yAxisMax: x軸和y軸顯示範圍的最小、最大值(棒狀圖未支援)。
- xAxisFormat and yAxisFormat: 軸上標示數值的格式。例如,若x軸為date類別,則xAxisFormat設成
%Y-%m
便可顯示為類似「2021-12」的格式。數的可用格式列舉於 https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers ,而日期/時間的可用格式則見 https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time 。 - xAxisAngle: 將x軸旋轉多少角度。推薦值為: -45, +45, -90, +90
- xType 和 yType: 數據的類型,例如:
integer
表示整數,number
表示實數,date
表示日期(如YYYY/MM/DD),string
表示字串。 - x: 要作圖的各數據點的x值,以半形逗號分隔。
- y 或 y1, y2, …: 要作圖的一列或多列數據點的值。對於餅狀圖,
y2
是扇形的半徑。 - legend: 顯示圖例(僅在有多列數據點時生效)。
- y1Title, y2Title, …: 定義圖例中,對應數據列的標籤。
- linewidth: 對折線圖,定義線的粗幼。對餅狀圖,則是餅塊間隙的距離。
- showValues: 額外將y值輸出為文字。(目前僅支援餅狀圖和(無堆疊的)棒狀圖。)輸出有下列參數可供設置,設置時要按
name1:value1, name2:value2
格式:- format: 輸出的格式,可用數值格式見 https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers ,可用日期/時間格式則見 https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md 。
- fontcolor: 字體顏色
- fontsize: 字體大小
- offset: 移動文字的偏移量。對於棒狀圖和有
midangle
的餅狀圖,偏移量亦決定文字是在圖表內抑或外。 - angle (僅限餅狀圖):文字的角度,可用度數表示,或設為
midangle
(預設),意思是基於扇形中央方位角的動態角度。
- showSymbols: 對折線圖,在各數據點顯示符號(圓形)。
- innerRadius: 對餅狀圖,定義內半徑,以生成「環形圖」。
- formatjson: 設置JSON物件格式使之更可讀。
Template wrappers
The functions mapWrapper
and chartWrapper
are wrappers to pass all parameters of the calling template to the respective map
and chart
functions.
Note: In the editor preview the graph extension creates a canvas element with vector graphics. However, when saving the page a PNG raster graphics is generated instead. {{#invoke:Graph:Chart
範例
編輯基礎範例
編輯折綫圖:
{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.
面積圖:
{{Graph:Chart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
Note: The y-axis starts from zero
條形圖:
{{Graph:Chart|width=400|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=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=line|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
包含多條數據的區域圖,混合交曡展示:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
包含多條數據的條形圖:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
數據值平滑後的區域圖:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
堆疊多條數據的條形圖:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
餅圖
編輯{{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}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
{{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|showValues=}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
{{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=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
散點圖
編輯By using a line plot with linewidth=0
, it is possible to create a scatter plot:
{{Graph:Chart|width=500|height=200|type=line|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603|showSymbols=1|linewidth=0|yGrid= |xGrid= }}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
使用百分比
編輯- When
xAxisFormat
oryAxisFormat
is set to%
, a percentage sign will be added to the scale of the corresponding axis. - A value of
1
equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance.25
for 25%. - Including the code
| yAxisMin=0 | yAxisMax=1
will force the y axis scale to run from 0% to 100%.
{{Graph:Chart | width = 450 | height = 350 | x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 | yAxisMin = 0 | yAxisMax = 1 | yAxisFormat = % | showSymbols = | y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46 | y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63 | y3 = .27, .311, .31, , .26, .28, .285 | y4 = {{repeat|7|, }} .40, .44, .42, .47, .44, .43, .42 }}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
一個擁有超過100%數值和負值的圖表:
{{Graph:Chart | width = 450 | height = 350 | x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 | yAxisFormat = % | showSymbols = | y1 = 2, .43, 1.20, .39, .43, .0, -.38, -.20, .18, .54 , 0 }}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
圖例
編輯儅有多條數據時,可以添加圖例:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend=Legend | y1Title=Blue | y2Title=Orange | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 }}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
將legend參數留空可以隱藏圖例標題:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | legend= | y1Title=Blue | y2Title=Orange | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 }}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
長圖例看起來比較笨拙。最好將圖例隱藏,並使用 {{Legend}} (或 a similar template) 代替:
{{Graph:Chart | width=400 | height=150 | xAxisTitle=X | yAxisTitle=Y | colors=darkred, gold | type=line | x=1,2,3,4,5,6,7,8 | y1=10,12,6,14,2,10,7,9 | y2=2,4,6,8,13,11,9,2 }} {{legend|darkred|This is a long legend entry and wouldn't look so good if it was part of the graph itself.}} {{legend|gold|This is another fairly long entry.}}
![]() | 由於已知的技術原因,圖表暫時不可用。帶來不便,我們深表歉意。 |
This method also allows the use of wiki formatting and the insertion of links. Graphs using the default colors need to specify the hex values in the legend templates:
Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.
注意事項
編輯如果瀏覽器停用Javascript,將顯示為空白。
由於phab:T334940,Graph標籤因安全問題被暫時停用。
模板編輯說明
編輯重定向
編輯參見
編輯![](http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Community_Logo.svg/40px-Wikimedia_Community_Logo.svg.png)