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