模板: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。 - 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
theaa
component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette iscategory10
). - 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), andstring
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
:- format: Format the output according to 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.
- fontcolor: text color
- fontsize: text size
- offset: move text by the given offset. For bar charts and pie charts with
midangle
this also defines if the text is inside or outside the chart. - angle (pie charts only): text angle in degrees or
midangle
(default) for dynamic angles based on the mid-angle of the pie sector.
- 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>
標籤因安全原因被臨時禁用。
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.
面積圖:
<graph>
標籤因安全原因被臨時禁用。
Note: The y-axis starts from zero
條形圖:
<graph>
標籤因安全原因被臨時禁用。
多條數據
編輯包含多條數據的折綫圖,使用顔色區分:
<graph>
標籤因安全原因被臨時禁用。
包含多條數據的區域圖,混合交曡展示:
<graph>
標籤因安全原因被臨時禁用。
包含多條數據的條形圖:
<graph>
標籤因安全原因被臨時禁用。
數據值平滑後的區域圖:
<graph>
標籤因安全原因被臨時禁用。
堆疊多條數據的條形圖:
<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
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 }}
<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 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:Graph:Chart/doc。 (編輯 | 歷史) 編者可以在本模板的沙盒 (建立 | 鏡像)和測試樣例 (建立)頁面進行實驗。 請在/doc子頁面中添加分類。 本模板的子頁面。 |