틀:Graph:Chart/설명문서: 두 판 사이의 차이

시각위키텍스트

2024년 4월 24일 (수) 16:48 기준 최신판

루아 사용:

모듈:Graph

CSS

This template uses TemplateStyles:

Template:Graph:Chart/styles.css

CSV2Chart

If you have data from a spreadsheet document (e.g. LibreOffice Calc) or in a statistics software R/R-Studio, you can export them to CSV file. The CSV file can be loaded with an v:en:AppLSAC, that is able to convert the CSV in chart for the data. The column should have headers in the first row. The column of the CSV file contain float or integer values. CSV2WikiChart was created as support tool for Wikipedia and for Wikiversity learning resources that contain data.

Parameters

모듈:Graph/doc

Examples

Basic examples

Line Chart:

{{Graph:Chart
 | width = 450
 | height = 150
 | type = line
 | x = 1,2,3,4,5,6,7,8,9
 | y = 10,12,6,14,2,10,7,9,12
}}

Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Area chart:

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

Bar chart:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=The X axis
 | yAxisTitle=The Y axis
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Multiple data series

Line chart with more than one data series, using colors:

{{Graph:Chart
 | width=400
 | height=150
 | xGrid=
 | yGrid=
 | 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
 | y1Title=Y1 Series
 | y2=2,4,6,8,13,11,9,2
 | y2Title=Y2 Series
 | colors=#0000aa,#ff8000
}}

Area chart with more than one data series showing blended overlap:

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

Bar chart with multiple data series:

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

Area chart with smoothed data values:

{{Graph:Chart
 | width=400
 | height=150
 | 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
}}

Bar chart with stacked data series:

{{Graph:Chart
 | width=400 | height=150
 | 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
}}

Pie charts

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | 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=Letter
 | 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=Letter
 | 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=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

Scatter plot

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

Using percentages

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

A graph showing values greater than 100% and negative values:

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

Legends

A legend can be added where there are multiple data series:

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

The title can be omitted by leaving the parameter blank:

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

Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{Legend}} (or a similar template) instead:

{{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: 틀:Columns-list

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

Annotations

Line Chart with horizontal annotations only:

{{Graph:Chart
|hannotatonslabel=label4, label5, label6
|hannotatonsline=4, 5, 6
|linewidths=2,4,0
|showSymbols=3,3,3
|symbolsShape=triangle_up, cross, cross
|type=line
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}

Area chart with vertical annotations only

{{Graph:Chart
|vAnnotatonsLine=1, 2, 3 
|vAnnotatonsLabel=label1, label2, label3
|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|x=0,1,2,3
|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}

@@ 1번째 줄: / 1번째 줄: @@
-{{설명문서 안내}}
+{{Documentation subpage}}
-<!-- 여기에 틀에 대한 설명문서를 작성하세요. -->
+{{Lua|Module:Graph}}
-{{루아|모듈:Graph}}
+{{Uses TemplateStyles|Template:Graph:Chart/styles.css}}
-== 사용법 ==
+== CSV2Chart ==
-; 꺾은 선 그래프
+If you have data from a spreadsheet document (e.g. [[w:LibreOffice|LibreOffice]] Calc) or in a statistics software [[R (programming language)|R/R-Studio]], you can export them to CSV file. The CSV file can be loaded with an [[v:en:AppLSAC]], that is able to convert the CSV in chart for the data. The column should have headers in the first row. The column of the CSV file contain float or integer values. [https://niebert.github.io/csv2wikichart_app CSV2WikiChart] was created as support tool for Wikipedia and for Wikiversity learning resources that contain data.
-{{code|<nowiki>{{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}}</nowiki>}}
-{{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}}<br />
-:* Y축은 {{para|y}}의 최소값부터 시작되지만 {{para|yAxisMin}}로 강제 지정을 할 수 있다.
-; 면 그래프
-{{code|<nowiki>{{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}}</nowiki>}}
-{{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}}
-:* Y축은 0에서 시작된다.
-: 막대 그래프
+== Parameters ==
-{{code|<nowiki>{{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}}</nowiki>}}
+{{Module:Graph/doc|chart|nocat=yes}}
-{{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}}
-;색을 사용한 여러개의 꺽은 선 그래프
+== Examples ==
-{{code|<nowiki>{{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}}</nowiki>}}
+===Basic examples===
-{{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}}
+Line Chart:
+<pre>
+{{Graph:Chart
+ | width = 450
+ | height = 150
+ | type = line
+ | x = 1,2,3,4,5,6,7,8,9
+ | y = 10,12,6,14,2,10,7,9,12
+}}
+</pre>
+{{Graph:Chart
+ | width = 400
+ | height = 150
+ | type = line
+ | x = 1,2,3,4,5,6,7,8,9
+ | y = 10,12,6,14,2,10,7,9,12
+}}
+Note: The y-axis starts from the smallest y value, though this can be overridden with the <code>yAxisMin</code> parameter.
+Area chart:
+<pre>
+{{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
+}}
+</pre>
+{{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
+Bar chart:
+<pre>
+{{Graph:Chart
+ | width=400
+ | height=100
+ | xAxisTitle=The X axis
+ | yAxisTitle=The Y axis
+ | type=rect
+ | x=1,2,3,4,5,6,7,8
+ | y=10,12,6,14,2,10,7,9
+}}
+</pre>
+{{Graph:Chart
+ | width=400
+ | height=100
+ | xAxisTitle=The X axis
+ | yAxisTitle=The Y axis
+ | type=rect
+ | x=1,2,3,4,5,6,7,8
+ | y=10,12,6,14,2,10,7,9
+}}
+===Multiple data series===
+Line chart with more than one data series, using colors:
+<pre>
+{{Graph:Chart
+ | width=400
+ | height=150
+ | xGrid=
+ | yGrid=
+ | 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
+ | y1Title=Y1 Series
+ | y2=2,4,6,8,13,11,9,2
+ | y2Title=Y2 Series
+ | colors=#0000aa,#ff8000
+}}
+</pre>{{Graph:Chart
+ | width=400
+ | height=150
+ | xGrid=
+ | yGrid=
+ | 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
+ | y1Title=Y1 Series
+ | y2=2,4,6,8,13,11,9,2
+ | y2Title=Y2 Series
+ | colors=#0000aa,#ff8000
+}}
+Area chart with more than one data series showing blended overlap:
+<pre>
+{{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
+}}
+</pre>{{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
+}}
+Bar chart with multiple data series:
+<pre>
+{{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
+}}
+</pre>
+{{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
+}}
+Area chart with smoothed data values:
+<pre>
+{{Graph:Chart
+ | width=400
+ | height=150
+ | 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
+}}
+</pre>
+{{Graph:Chart
+ | width=400
+ | height=150
+ | 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
+}}
+Bar chart with stacked data series:
+<pre>
+{{Graph:Chart
+ | width=400 | height=150
+ | 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
+}}
+</pre>
+{{Graph:Chart
+ | width=400 | height=150
+ | 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
+}}
+===Pie charts===
+<pre>
+{{Graph:Chart
+ | width=100
+ | height=100
+ | type=pie
+ | legend=Letter
+ | x=A,B,C,D,E,F,G,H,I
+ | y1=100,200,150,300,100,100,150,50,200
+}}
+</pre>
+{{Graph:Chart
+ | width=100
+ | height=100
+ | type=pie
+ | legend=Letter
+ | x=A,B,C,D,E,F,G,H,I
+ | y1=100,200,150,300,100,100,150,50,200
+}}
-; 겹친 부분은 색이 섞이는 여러개의 면 그래프
-{{code|<nowiki>{{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}}</nowiki>}}<br />{{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}}
-;여러 데이터를 기초로 두는 막대 그래프
+<pre>
-{{code|<nowiki>{{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}}</nowiki>}}
+{{Graph:Chart
-{{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}}
+ | width=100
+ | height=100
+ | type=pie
+ | legend=Letter
+ | x=A,B,C,D,E,F,G,H,I
+ | y1=100,200,150,300,100,100,150,50,200
+ | showValues=
+}}
+</pre>
+{{Graph:Chart
+ | width=100
+ | height=100
+ | type=pie
+ | legend=Letter
+ | x=A,B,C,D,E,F,G,H,I
+ | y1=100,200,150,300,100,100,150,50,200
+ | showValues=
+}}
-; 곡선으로 표시하는 면 그래프
-{{code|<nowiki>{{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}}</nowiki>}}
-{{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}}
-; 데이터 계열을 누적해서 표시한 막대 그래프
+<pre>
-{{code|<nowiki>{{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=항목 A|y2Title=항목 B|colors=seagreen, orchid}}</nowiki>}}<br />{{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=항목 A|y2Title=항목 B|colors=seagreen, orchid}}
+{{Graph:Chart
+ | width=100
+ | height=100
+ | type=pie
+ | legend=Letter
+ | 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=
+}}
+</pre>
+{{Graph:Chart
+ | width=100
+ | height=100
+ | type=pie
+ | legend=Letter
+ | 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=
+}}
-===테두리 표시===
-; {{틀|Image frame}}을 사용한 꺾은 선 그래프
 <pre>
-{{Image frame
+{{Graph:Chart
-  | caption=꺾은 선 그래프
+  | width=100
-  | content = {{Graph:Chart
+  | height=100
-   | width=400
+ | type=pie
-   | height=150
+ | innerRadius=40
-   | type=line
+ | legend=Letter
-   | x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9
+ | x=A,B,C,D,E,F,G,H,I
-  }}
+ | y1=100,200,150,300,100,100,150,50,200
 }}
 </pre>
-{{Image frame
+{{Graph:Chart
-  | caption=꺾은 선 그래프
+  | width=100
-  | content = {{Graph:Chart
+  | height=100
-   | width=400
+ | type=pie
-   | height=150
+ | innerRadius=40
-   | type=line
+ | legend=Letter
-   | x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9
+ | x=A,B,C,D,E,F,G,H,I
-  }}
+ | y1=100,200,150,300,100,100,150,50,200
 }}
-{{-}}
-; {{틀|사이드 박스}}를 사용한 막대 그래프
+===Scatter plot===
+By using a line plot with <code>linewidth=0</code>, it is possible to create a [[scatter plot]]:
 <pre>
-{{사이드 박스|metadata=No<!--This makes the box display on the mobile site-->
+{{Graph:Chart
- | above = '''김아무개 그래프'''
+|width=500
- | abovestyle = text-align:center
+|height=200
- | text = {{Graph:Chart
+|type=line
-  |height = 150
+|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
-  |width = 200
+|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
-  |xAxisTitle = 연도
+|showSymbols=1
-  |xAxisAngle = -40
+|linewidth=0
-  |yAxisTitle = 흥얼흥얼 단위
+|yGrid= |xGrid=
-  |yAxisMin = 0
-  |type = rect
-  |showValues = offset:4
-  |x = 2011, 2012, 2013, 2014, 2015, 2016
-  |y1 = 1326, 145, 203, 377, 639, 306
-  |y2 =   ,     ,     , 226, 208, 276
-  |colors = blue,grey
-  }}
- | below = 여기에 설명서와 출처
 }}
 </pre>
+{{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=
+}}
+===Using percentages===
+*When <code>xAxisFormat</code> or <code>yAxisFormat</code> is set to <code>%</code>, a percentage sign will be added to the scale of the corresponding axis.
+*A value of <code>1</code> equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance <code>.25</code> for 25%.
+*Including the code <code>| yAxisMin=0 | yAxisMax=1</code> will force the y axis scale to run from 0% to 100%.
+<pre>
+{{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
+}}
+</pre>
+{{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
+}}
+A graph showing values greater than 100% and negative values:
+<pre>
+{{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
+}}
+</pre>
+{{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
+}}
+====Legends====
+A legend can be added where there are multiple data series:
+<pre>
+{{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
+}}
+</pre>{{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
+}}
-{{사이드 박스|metadata=No<!--This makes the box display on the mobile site-->
+The title can be omitted by leaving the parameter blank:
- | above = '''김아무개 그래프'''
+<pre>
- | abovestyle = text-align:center
+{{Graph:Chart
- | text = {{Graph:Chart
+ | width=400
-  |height = 150
+ | height=150
-  |width = 200
+ | xAxisTitle=X
-  |xAxisTitle = 연도
+ | yAxisTitle=Y
-  |xAxisAngle = -40
+ | legend=
-  |yAxisTitle = 흥얼흥얼 단위
+ | y1Title=Blue
-  |yAxisMin = 0
+ | y2Title=Orange
-  |type = rect
+ | type=line
-  |showValues = offset:4
+ | x=1,2,3,4,5,6,7,8
-  |x = 2011, 2012, 2013, 2014, 2015, 2016
+ | y1=10,12,6,14,2,10,7,9
-  |y1 = 1326, 145, 203, 377, 639, 306
+ | y2=2,4,6,8,13,11,9,2
-  |y2 =   ,     ,     , 226, 208, 276
-  |colors = blue,grey
-  }}
- | below = 여기에 설명서와 출처
 }}
-{{-}}
+</pre>{{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
+}}
+Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{tl|Legend}} (or [[:Category:Legend templates|a similar template]]) instead:
+<pre>
+{{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.}}
+</pre>{{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:
+{{columns-list|colwidth=7em|
+{{legend|#1f77b4|#1f77b4}}
+{{legend|#ff7f0e|#ff7f0e}}
+{{legend|#2ca02c|#2ca02c}}
+{{legend|#d62728|#d62728}}
+{{legend|#9467bd|#9467bd}}
+{{legend|#8c564b|#8c564b}}
+{{legend|#e377c2|#e377c2}}
+{{legend|#7f7f7f|#7f7f7f}}
+{{legend|#bcbd22|#bcbd22}}
+{{legend|#17becf|#17becf}}
+}}
+Alternatively, [https://www.w3schools.com/cssref/css_colors.asp CSS color names] (or hex values) can be specified in the graph and the legend templates.
+===Annotations===
+Line Chart with horizontal annotations only:
+<pre>
+{{Graph:Chart
+|hannotatonslabel=label4, label5, label6
+|hannotatonsline=4, 5, 6
+|linewidths=2,4,0
+|showSymbols=3,3,3
+|symbolsShape=triangle_up, cross, cross
+|type=line
+|x=0,1,2,3
+|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}
+</pre>
+{{Graph:Chart
+|hAnnotatonsLine=4, 5, 6
+|hAnnotatonsLabel=label4, label5, label6
+|linewidths=2,4,0
+|showSymbols=2,4,3
+|symbolsShape=triangle_up, cross, square
+|type=line
+|x=0,1,2,3
+|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}
+Area chart with vertical annotations only
+<pre>
+{{Graph:Chart
+|vAnnotatonsLine=1, 2, 3
+|vAnnotatonsLabel=label1, label2, label3
+|colors=#ffff5ba0, #641050ff, #ffaaff00
+|type=area
+|x=0,1,2,3
+|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}</pre>
+{{Graph:Chart
+|vAnnotatonsLine=1, 2, 3
+|vAnnotatonsLabel=label1, label2, label3
+|colors=#ffff5ba0, #641050ff, #ffaaff00
+|type=area
+|x=0,1,2,3
+|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}
-<includeonly>
-<!-- 여기에 분류를 넣고, 인터위키는 위키데이터에 작성하세요. -->
-</includeonly>
+<includeonly>{{Sandbox other||
+<!-- Categories below this line, please; interwikis at Wikidata -->
+[[Category:Graph Template Collection]]
+}}</includeonly>