跳转到内容

模板: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。
  • colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as #rgb/#rrggbb/#aarrggbb or by a CSS color name. For #aarrggbb the aa component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette is category10).
  • xAxisTitle and yAxisTitle: captions of the x and y axes
  • xAxisMin, xAxisMax, yAxisMin, and yAxisMax: minimum and maximum values of the x and y axes (not yet supported for bar charts)
  • xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values are listed at https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time. For example, the format % can be used to output percentages.
  • xAxisAngle: rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90
  • xType and yType: Data types of the values, e.g. integer for integers, number for real numbers, date for dates (e.g. YYYY/MM/DD), and string for ordinal values.
  • x: the x-values as a comma-separated list
  • y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts y2 denotes the radiuses of the corresponding sectors.
  • legend: show legend (only works in case of multiple data series)
  • y1Title, y2Title, …: defines the label of the respective data series in the legend
  • linewidth: line width for line charts or distance between the pie segments for pie charts
  • showValues: Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as name1:value1, name2:value2:
  • showSymbols: For line charts: show a symbol (circle) at each data point.
  • innerRadius: For pie charts: defines the inner radius to create a doughnut chart.
  • formatjson: format JSON object for better legibility

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}}

<graph>标签因安全原因被临时禁用。


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}}

<graph>标签因安全原因被临时禁用。


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>标签因安全原因被临时禁用。

多条数据

[编辑]

包含多条数据的折线图，使用颜色区分：

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|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>标签因安全原因被临时禁用。

包含多条数据的区域图，混合交叠展示：

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|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>标签因安全原因被临时禁用。

包含多条数据的条形图：

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|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>标签因安全原因被临时禁用。

数据值平滑后的区域图：

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|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>标签因安全原因被临时禁用。

堆叠多条数据的条形图：

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|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>标签因安全原因被临时禁用。

饼图

[编辑]

{{Graph:Chart|width=100|height=100|type=pie|legend=图例|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

<graph>标签因安全原因被临时禁用。

{{Graph:Chart|width=100|height=100|type=pie|legend=图例|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}

<graph>标签因安全原因被临时禁用。

{{Graph:Chart|width=100|height=100|type=pie|legend=图例|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>标签因安全原因被临时禁用。

{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=图例|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

<graph>标签因安全原因被临时禁用。

散点图

[编辑]

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= }}

<graph>标签因安全原因被临时禁用。

使用百分比

[编辑]
  • 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
}}

<graph>标签因安全原因被临时禁用。

一个拥有超过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>标签因安全原因被临时禁用。

图例

[编辑]

儅有多条数据时，可以添加图例： 

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=图例
 | y1Title=蓝色
 | y2Title=橘色
 | 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
}}

<graph>标签因安全原因被临时禁用。

将legend参数留空可以隐藏图例标题： 

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=
 | y1Title=蓝色
 | y2Title=橘色
 | 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
}}

<graph>标签因安全原因被临时禁用。

长图例看起来比较笨拙。最好将图例隐藏，并使用 {{Legend}}（或类似的图例模板）代替： 

{{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.}}

<graph>标签因安全原因被临时禁用。

  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:

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

注意事项

[编辑]

模板编辑说明

[编辑]

重定向

[编辑]

参见

[编辑]

Template:Meta

检索自“https://zh.wikisource.org/w/index.php?title=Template:Graph:Chart/doc&oldid=2070113”