GraphViz 圖表

   

本文說明如何使用 Chart API 建立 GraphViz 圖表。

總覽

GraphViz 是一組開放原始碼工具，能以圖表呈現連線能力圖表。您可以使用 DOT 語言和所選版面配置引擎建立 GraphViz 圖表。

GraphViz 圖表支援一組不同的必要參數。以下是支援的參數：

參數 必填或選填 說明
cht=gv[:<opt_engine>] 這是必填欄位

指定 GraphViz 圖表。您可以選擇指定 GraphViz 引擎。如要指定版面配置引擎，請加入分號 : 標記，並為 <opt_engine> 指定下列其中一個字串：

  • dot：預設引擎
  • neato
  • twopi
  • circo
  • fdp

如需這類引擎的說明，請參閱 GraphViz 網站。
chs=<width>x<height> 選用 如未指定大小，圖表會自動調整大小。
chl=<DOT_string> 這是必填欄位 要繪製的圖表，採用 DOT 語言標記法。您可以在 GraphViz 網站找到 DOT 語言參考資料。
chd 未使用 GraphViz 代碼異常的原因，例如系統會忽略 chd 參數。請勿在網址中加入這個字串。
chof=<output_format> 選用 圖表的輸出格式。如要瞭解系統支援的輸出格式，請參閱參數說明。如果指定 chof=json，系統會以 HTML 圖片對應的形式傳回圖表的 JSON 表示法，方便您在圖表中加入連結或互動功能。詳情請參閱「建立圖表圖片地圖」。
callback=<handling_function_name> 選用 如果您指定 chof=json，也可以指定要使用傳回的 JSON 呼叫的函式，其中包含圖表的圖片對應。您的函式必須接受單一的 JSON 參數，該參數為圖表的 JSON 表示法。接著，網頁即可將圖表指定為 <img> 元素來算繪圖表，並使用 chof=json&callback=somefunc 呼叫相同網址，並加入名為 somefunc() 的函式來剖析傳回的 JSON，並新增連結或互動性。

 

例如：

說明 範例

點式引擎範例 (預設)。

圓點圖
cht=gv
chl=digraph{A->B->C->A}
chs=150x150
相同圖表的神經元引擎範例 類神經圖
cht=gv:neato
chl=digraph{A->B->C->A}
chs=150x150
圓點圖，未指定大小。圖表會自動調整大小。 未指定大小的圓點圖
cht=gv
chl=graph{a--b--c;b--d}
較複雜的圖表。 粉絲點圖
cht=gv
chl=
  graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

以下是目前 GraphViz 圖表的一些提示和已知限制：

  • 不可使用 graph 屬性 size；請改用 Chart API 參數 chs。
  • 節點數量上限為 200 個，邊緣數量上限為 400 個。
  • 不支援反鋸齒、透明化和替代字型。
  • 系統不支援 node 屬性 image 和 shapefile，且會產生錯誤 (如有)。
  • 系統不支援 graph 屬性 ratio、margin 和 pad；如有提供，系統會忽略這些屬性。