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
相同圖表的 Neato 引擎範例。 霓虹圖
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，如有提供，系統會忽略這些項目。