模板:Graph:Chart/doc

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 or yAxisFormat 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 is a long legend entry and wouldn't look so good if it was part of the graph itself.

  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:

  #1f77b4

  #ff7f0e

  #2ca02c

  #d62728

  #9467bd

  #8c564b

  #e377c2

  #7f7f7f

  #bcbd22

  #17becf

Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.

注意事項

如果瀏覽器停用Javascript，將顯示為空白。

由於phab:T334940，Graph標籤因安全問題被暫時停用。