模板:Graph:Chart/doc

此页面是Template:Graph:Chart的模板文档。
此页面可能包含了模板的使用说明、分类和其他内容。

本模组旨在处理一些资料无法与较新的Chart扩展相容的图表提供基本的图表显示功能及简易资料悬浮框。若需使用图表原有的互动性功能，建议转换为Chart扩展：如果是{{Graph:Chart}}原有数据结构或图表性质有在新版图表支援的范围内的图表则建议转换为较新的Chart扩展格式。您可以使用Commons上的MediaWiki提供的简单脚本：graphDataImport.js。

本模板不能替换引用嵌入。由于本模板主要是基于SVG制作，但因为技术限制和安全性考量，目前维基系统尚未开放直接在维基代码里书写<svg></svg>标签，目前唯一输出SVG的方法只有从Lua输出，因此必须维持{{#invoke:}}的存在模板才能正常显示；倘若替换引用的话，本模板显示的内容将会失效或完全损毁。

此模板使用Lua语言：

Module:Graph

由于旧版基于Vega的<graph>图表功能因技术与安全性原因已被官方停用，本模板已使用Scribunto的SVG程式库全面重构。

新版模板可直接在维基百科服务器端产生纯静态的SVG向量图形。它不仅相容多数旧有的模板参数，更支援直接载入外部 JSON 数据，甚至能直接相容并渲染大部分旧版的 Vega JSON 源代码。

由于目前是尝试将<graph>迁移至Scribunto的SVG库让图表能恢复显示，因此如有显示问题，请于Template_talk:Graph:Chart讨论页回报。

重大变更与注意事项

互动性被局限：由于输出为纯静态 SVG，旧版的鼠标悬停（Hover）、动态提示框（Tooltip）只能有限度呈现，而需要互动或反馈的如与点击事件已不再支援。
不支援动态 API (PageViews)：出于系统沙盒安全限制，Lua 模组无法发起外部 HTTP 请求。因此，依赖 wikirest:// 即时抓取流量数据的图表（如 PageViews）将无法渲染，并会自动显示“图表已停用”的系统警告。
原生支援 Vega JSON：您可以直接将原本写在 <graph>...</graph> 内的 JSON 程式码，原封不动地作为本模板的第一个无名参数传入（例如：{{Graph:Chart | { "version": 2, "data": ... } }}），模组会自动将其转译为 SVG。

载入外部资料 (新功能)

新版模组支援将“图表设定”与“资料来源”分离。您可以透过 dataUrl 参数指定 JSON 来源，并用以下参数进行资料绑定：

参数	说明
`dataUrl`	资料来源页面。支援 `Data:` 命名空间（Tabular Data）、`Module:` 命名空间（Lua Table）、以及 `wikiraw:///Wikipedia:某頁面/data.json`（一般 JSON 页面）。
`xField`	指定 JSON 资料中，要作为 X 轴的键值（Key）。
`yField`	指定 JSON 资料中，要作为 Y 轴的数值键值（Key）。
`zField`	指定 JSON 资料中，要作为 Z 轴的数值键值（Key）。
`groupField`	（可选）分组栏位。指定后，模组会根据该栏位的不同数值（如：类别A、类别B），自动将一维资料拆分为多条折线或多个图层，并自动生成对应图例。
`y1Field`, `y2Field`...	（可选）在宽表格（Wide Data）模式下，可分别指定不同 Y 轴数列所对应的 JSON 栏位。

基本参数说明

相容于旧版的基础绘图参数：

参数	说明
`width`, `height`	图表的绘图区宽度与高度（像素）。最终生成的 SVG 总尺寸会加上坐标轴与图例的边距。
`type`	图表类型。支援：`line`（折线图，预设）、`area`（面积图）、`rect` 或 `bar`（长条图）、`pie`（圆饼图）、`boxplot`（盒状图）、`heatmap`（热力图）、`bubble`（气泡图）、`gantt`（甘特图）、`radar`（雷达图）。加上 `stacked` 前缀可生成堆叠图表（如 `stackedarea`、`stackedrect`）。
`x`	X 轴数据点，以半形逗号分隔。
`y` 或 `y1`, `y2`...	Y 轴数据点，以半形逗号分隔。对于 `pie` 圆饼图，`y2` 可作为扇形的半径数据以生成南丁格尔玫瑰图。
`z`	Z 轴数据点，以半形逗号分隔。用于3D图表。
`colors`	图表色盘，以半形逗号分隔。支援 CSS 色名、`#rgb`、`#rrggbb` 或包含透明度通道的 `#aarrggbb`。若未指定，将使用 D3 Category10 色票。
`xAxisTitle`, `yAxisTitle`, `zAxisTitle`	X 轴、 Y 轴与 Z 轴的标题。
`xAxisMin`, `xAxisMax` `yAxisMin`, `yAxisMax` `zAxisMin`, `zAxisMax`	强制指定坐标轴的最小与最大值。若图表实际值域跨度极小，此设定将作为防爆冲安全截断界线，系统仍会自动缩放以贴合实际数据。
`xType`, `yType` , `zType`	数据类型。支援：`number`（浮点数）、`integer`（整数）、`string`（字串 / 类别）、`date`（日期，如 YYYY-MM-DD）。
`xAxisFormat`, `yAxisFormat` , `zAxisFormat`	坐标轴数值的格式化字串（相容 D3 语法，如 `.2f`、`%`、`s` 等）。
`xGrid`, `yGrid`, `zGrid`	是否显示 X 轴、 Y 轴或 Z 轴背景格线。填入 `true` 或 `yes` 开启。
`legend`	是否显示图例。填入文字将作为图例标题；若填入 `true` 则显示预设标题。预设显示于右侧外部。
`showValues`	在图表上显示数值。可设定格式，如：`format:.2f, fontcolor:red, offset:-4, fontsize:12`。
`showSymbols`	在折线图的数据点上显示标记符号。可直接填入数字指定符号大小。
`symbolsShape`	标记符号的形状（逗号分隔）。支援 `circle`, `square`, `cross`, `diamond`, `triangle-up` 等，或自订 SVG Path 或完整SVG。

范例

分组条形图：

{{Graph:Chart|type=groupedbar|x=2024,2025,2026|y1=12,18,25|y2=10,15,22|legend=項目}}

0510152025202420252026项目y1y2y1 (2024): 12y1 (2025): 18y1 (2026): 25y2 (2024): 10y2 (2025): 15y2 (2026): 22

气泡图：

{{Graph:Chart|type=bubble|x=10,20,30,40|y1=15,35,25,45|size1=10,50,25,100}}

0102030405010203040

10: 15 (size: 10)

20: 35 (size: 50)

30: 25 (size: 25)

40: 45 (size: 100)

箱形图：

{{Graph:Chart|type=boxplot|x=A組,B組|y1=5,8|y2=12,15|y3=18,22|y4=25,30|y5=32,38}}

510152025303540A组B组A组 | Med: 18 (Q1: 12, Q3: 25, Min: 5, Max: 32)B组 | Med: 22 (Q1: 15, Q3: 30, Min: 8, Max: 38)

（y1~y5 依序为 Min, Q1, Median, Q3, Max）

甘特图：

{{Graph:Chart|type=gantt|x=規劃,開發,測試|y1=2026-01,2026-03,2026-07|y2=2026-04,2026-08,2026-10}}

20262026-032026-062026-08规划开发测试规划: 2026 ~ 2026-04开发: 2026-03 ~ 2026-08测试: 2026-07 ~ 2026-10

气泡地图：

{{Graph:Chart|lat=25.03,35.68,51.50|lon=121.56,139.76,-0.12|pointLabels=臺北,東京,倫敦|pointSize=6,15,2}}

台北东京伦敦

台北 (25.03, 121.56)

东京 (35.68, 139.76)

伦敦 (51.50, -0.12)

自订折线图资料点：

{{Graph:Chart
| width=400 | height=180
| type=line
| x=1,2,3,4,5
| y1=10,25,18,32,28
| y2=5,14,22,19,24
| legend=圖例
| showSymbols=5
| symbolsShape=<svg viewBox="0 0 24 24"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>, <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
}}

0510152025303512345图例y1y2

y1 (1): 10

y1 (2): 25

y1 (3): 18

y1 (4): 32

y1 (5): 28

y2 (1): 5

y2 (2): 14

y2 (3): 22

y2 (4): 19

y2 (5): 24

雷达图：

{{Graph:Chart
| width=260 | height=260
| type=radar
| title=角色六維能力比較
| x=HP,物理攻擊,物理防禦,魔法攻擊,魔法防禦,敏捷
| y1=85,95,70,30,60,90 | y1Title=角色 A
| y2=70,40,65,98,92,75 | y2Title=角色 B
| yAxisMin=0 | yAxisMax=100
| legend=角色
}}

角色六维能力比较HP物理攻击物理防御魔法攻击魔法防御敏捷020406080100角色角色 A角色 B角色 A (HP): 85角色 A (物理攻击): 95角色 A (物理防御): 70角色 A (魔法攻击): 30角色 A (魔法防御): 60角色 A (敏捷): 90角色 B (HP): 70角色 B (物理攻击): 40角色 B (物理防御): 65角色 B (魔法攻击): 98角色 B (魔法防御): 92角色 B (敏捷): 75

极坐标长条图

{{Graph:Chart
| width = 320 | height = 320
| type = polarbar
| colorMap = jet
| yAxisMin = 0 | yAxisMax = 9
| x1 = 0.1, 0.9, 1.7, 2.7, 3.5, 4.5, 5.3
| y1 = 1, 5, 7, 6, 3, 4, 7
| z1 = 0.4, 0.3, 0.5, 0.6, 0.3, 0.4, 0.3
| y1Title = 極座標長條圖
| legend = 圖例
| hideAxes = 1
}}

图例极坐标长条图极坐标长条图 (0.1 rad): 1 (width: 0.4 rad)极坐标长条图 (0.9 rad): 5 (width: 0.3 rad)极坐标长条图 (1.7 rad): 7 (width: 0.5 rad)极坐标长条图 (2.7 rad): 6 (width: 0.6 rad)极坐标长条图 (3.5 rad): 3 (width: 0.3 rad)极坐标长条图 (4.5 rad): 4 (width: 0.4 rad)极坐标长条图 (5.3 rad): 7 (width: 0.3 rad)

3D长条图

{{Graph:Chart
| width=420 | height=280
| type=bar3d
| view_theta=42 | view_phi=26
| title=-{zh-cn:各季度区域营收 3D 对比; zh-tw:各季度區域營收 3D 對比}-
| x=Q1, Q2, Q3, Q4
| y1=28, 39, 52, 68 | y1Title=-{zh-cn:欧洲区; zh-tw:歐洲區}-
| y2=32, 48, 65, 80 | y2Title=-{zh-cn:亚太区; zh-tw:亞太區}-
| y3=45, 58, 70, 92 | y3Title=-{zh-cn:美洲区; zh-tw:美洲區}-
| xAxisTitle=-{zh-cn:季度; zh-tw:季度}-
| yAxisTitle=-{}-
| zAxisTitle=-{zh-cn:营收; zh-tw:營收}-
| legend=true
| showValues=true
}}

Q1Q2Q3Q4欧洲区亚太区美洲区020406080100季度营收283952683248658045587092各季度区域营收 3D 对比欧洲区亚太区美洲区欧洲区 (Q1, 欧洲区): 28欧洲区 (Q2, 欧洲区): 39欧洲区 (Q3, 欧洲区): 52欧洲区 (Q4, 欧洲区): 68亚太区 (Q1, 亚太区): 32亚太区 (Q2, 亚太区): 48亚太区 (Q3, 亚太区): 65亚太区 (Q4, 亚太区): 80美洲区 (Q1, 美洲区): 45美洲区 (Q2, 美洲区): 58美洲区 (Q3, 美洲区): 70美洲区 (Q4, 美洲区): 92

函数图形

本模板也可以画出函数图形，但定义将会相对复杂，建议改用{{函数图形}}

-1-0.8-0.6-0.4-0.200.20.40.60.8101234567xy = sin(x)0: 00.1: 0.10.2: 0.20.3: 0.30.4: 0.390.5: 0.480.6: 0.560.7: 0.640.8: 0.720.9: 0.781: 0.841.1: 0.891.2: 0.931.3: 0.961.4: 0.991.5: 11.6: 11.7: 0.991.8: 0.971.9: 0.952: 0.912.1: 0.862.2: 0.812.3: 0.752.4: 0.682.5: 0.62.6: 0.522.7: 0.432.8: 0.332.9: 0.243: 0.143.1: 0.043.2: -0.063.3: -0.163.4: -0.263.5: -0.353.6: -0.443.7: -0.533.8: -0.613.9: -0.694: -0.764.1: -0.824.2: -0.874.3: -0.924.4: -0.954.5: -0.984.6: -0.994.7: -14.8: -14.9: -0.985: -0.965.1: -0.935.2: -0.885.3: -0.835.4: -0.775.5: -0.715.6: -0.635.7: -0.555.8: -0.465.9: -0.376: -0.286.1: -0.186.2: -0.08

以上图形的源代码：

{{Graph:Chart|1={
  "width": 500,
  "height": 300,
  "padding": 5,

  "data": [
    {
      "name": "points",
      "transform": [
        {
          "type": "sequence",
          "start": 0,
          "stop": 6.3,
          "step": 0.1,
          "as": "x"
        },
        {
          "type": "formula",
          "expr": "sin(datum.x)",
          "as": "y"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "domain": {"data": "points", "field": "x"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "points", "field": "y"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "xscale", "title": "x"},
    {"orient": "left", "scale": "yscale", "title": "y = sin(x)"}
  ],

  "marks": [
    {
      "type": "line",
      "from": {"data": "points"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "steelblue"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}
}}

旧版说明文档

此页面是Template:Graph:Chart的模板文档。
此页面可能包含了模板的使用说明、分类和其他内容。

此模板已评为已停用版且已失效。建议编辑者使用Chart扩展。

转换为Chart扩展：要将已失效的基于{{Graph:Chart}}的图表转换为较新的Chart扩展格式，您可以使用Commons上的MediaWiki提供的简单脚本：graphDataImport.js。

快捷方式

{{Graph}}

此模板使用Lua语言：

Module:Graph

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

051015123456781: 102: 123: 64: 145: 26: 107: 78: 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}}

051015123456781: 102: 123: 64: 145: 26: 107: 78: 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}}

05101512345678XY1: 102: 123: 64: 145: 26: 107: 78: 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}}

05101512345678XYLegendy1y2y1 (1): 10y1 (2): 12y1 (3): 6y1 (4): 14y1 (5): 2y1 (6): 10y1 (7): 7y1 (8): 9y2 (1): 2y2 (2): 4y2 (3): 6y2 (4): 8y2 (5): 13y2 (6): 11y2 (7): 9y2 (8): 2

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

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

05101512345678XYLegendy1y2y1 (1): 10y1 (2): 12y1 (3): 6y1 (4): 14y1 (5): 2y1 (6): 10y1 (7): 7y1 (8): 9y2 (1): 2y2 (2): 4y2 (3): 6y2 (4): 8y2 (5): 13y2 (6): 11y2 (7): 9y2 (8): 2

包含多条数据的条形图：

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

05101512345678XYLegendy1y2y1 (1): 10y1 (2): 12y1 (3): 6y1 (4): 14y1 (5): 2y1 (6): 10y1 (7): 7y1 (8): 9y2 (1): 2y2 (2): 4y2 (3): 6y2 (4): 8y2 (5): 13y2 (6): 11y2 (7): 9y2 (8): 2

数据值平滑后的区域图：

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

010203012345678XYLegendy1y2y1 (1): 10y1 (2): 12y1 (3): 6y1 (4): 14y1 (5): 2y1 (6): 10y1 (7): 7y1 (8): 9y2 (1): 2y2 (2): 4y2 (3): 6y2 (4): 8y2 (5): 13y2 (6): 11y2 (7): 9y2 (8): 2

堆叠多条数据的条形图：

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

010203012345678XYLegendData AData BData A (1): 10Data A (2): 12Data A (3): 6Data A (4): 14Data A (5): 2Data A (6): 10Data A (7): 7Data A (8): 9Data B (1): 2Data B (2): 4Data B (3): 6Data B (4): 8Data B (5): 13Data B (6): 11Data B (7): 9Data B (8): 2

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

LegendeABCDEFGHIA: 100 (7.4%)B: 200 (14.8%)C: 150 (11.1%)D: 300 (22.2%)E: 100 (7.4%)F: 100 (7.4%)G: 150 (11.1%)H: 50 (3.7%)I: 200 (14.8%)

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

LegendeABCDEFGHIA: 100 (7.4%)B: 200 (14.8%)C: 150 (11.1%)D: 300 (22.2%)E: 100 (7.4%)F: 100 (7.4%)G: 150 (11.1%)H: 50 (3.7%)I: 200 (14.8%)

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

LegendeABCDEFGHIA: 100 (7.4%)B: 200 (14.8%)C: 150 (11.1%)D: 300 (22.2%)E: 100 (7.4%)F: 100 (7.4%)G: 150 (11.1%)H: 50 (3.7%)I: 200 (14.8%)

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

LegendeABCDEFGHIA: 100 (7.4%)B: 200 (14.8%)C: 150 (11.1%)D: 300 (22.2%)E: 100 (7.4%)F: 100 (7.4%)G: 150 (11.1%)H: 50 (3.7%)I: 200 (14.8%)

散点图 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= }}

02,0004,0006,0008,000102030405060708015.7: 1,51710.8: 97068.5: 4,07533.4: 3,81923.8: 2,10642.2: 2,91927.1: 2,42838.2: 2,16413.5: 1,39374.3: 7,603

使用百分比

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

0%10%20%30%40%50%60%70%80%90%100%0510152025y1 (4): 43%y1 (8): 39%y1 (9): 43%y1 (10): 38%y1 (11): 38%y1 (12): 40%y1 (13): 48%y1 (14): 54%y1 (15): 42%y1 (16): 47%y1 (17): 45%y1 (18): 48%y1 (19): 44%y1 (20): 41%y1 (21): 41%y1 (22): 45%y1 (23): 46%y2 (1): 40%y2 (2): 37.7%y2 (3): 38%y2 (5): 39%y2 (6): 38%y2 (7): 41.9%y2 (8): 55%y2 (9): 60%y2 (10): 63%y3 (1): 27%y3 (2): 31.1%y3 (3): 31%y3 (5): 26%y3 (6): 28%y3 (7): 28.5%y4 (8): 40%y4 (9): 44%y4 (10): 42%y4 (11): 47%y4 (12): 44%y4 (13): 43%y4 (14): 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
}}

-40%-20%0%20%40%60%80%100%120%140%160%180%200%05101520251: 200%2: 43%3: 120%4: 39%5: 43%6: 0%7: -38%8: -20%9: 18%10: 54%11: 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
}}

05101512345678XYLegendBlueOrangeBlue (1): 10Blue (2): 12Blue (3): 6Blue (4): 14Blue (5): 2Blue (6): 10Blue (7): 7Blue (8): 9Orange (1): 2Orange (2): 4Orange (3): 6Orange (4): 8Orange (5): 13Orange (6): 11Orange (7): 9Orange (8): 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
}}

05101512345678XYBlueOrangeBlue (1): 10Blue (2): 12Blue (3): 6Blue (4): 14Blue (5): 2Blue (6): 10Blue (7): 7Blue (8): 9Orange (1): 2Orange (2): 4Orange (3): 6Orange (4): 8Orange (5): 13Orange (6): 11Orange (7): 9Orange (8): 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.}}

05101512345678XYy1 (1): 10y1 (2): 12y1 (3): 6y1 (4): 14y1 (5): 2y1 (6): 10y1 (7): 7y1 (8): 9y2 (1): 2y2 (2): 4y2 (3): 6y2 (4): 8y2 (5): 13y2 (6): 11y2 (7): 9y2 (8): 2

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

已暂时使用Scribunto的SVG库让图表能恢复显示，如有显示问题，请于Template_talk:Graph:Chart讨论页回报。

模板编辑说明

重定向

参见