模板: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子页面中添加分类。 本模板的子页面。