模板:Graph:Chart/sandbox

本模組旨在處理一些資料無法與較新的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}
        }
      }
    }
  ]
}
}}

舊版說明文檔

此模板已評為已停用版且已失效。建議編輯者使用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討論頁回報。

模板編輯說明

重定向

參見

上述文件嵌入自Template:Graph:Chart/doc。
編者可以在本模板的沙盒和測試樣例頁面進行實驗。
請在/doc子頁面中添加分類。本模板的子頁面。