Template:Graph:Chart

模板文档[查看] [编辑] [历史] [清除缓存]

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标签因安全问题被暂时停用。

模板編輯說明

重定向

參見

上述文档嵌入自Template:Graph:Chart/doc。 (编辑 | 历史)
编者可以在本模板的沙盒 (创建 | 镜像)和测试样例 (创建)页面进行实验。
请在/doc子页面中添加分类。 本模板的子页面。