Google GraphViz Charts API在国内无法正常访问。本文实现了一种代理访问Google GraphViz Charts的方法。
参数列表
- cht=gv[:<opt_engine>] , 可选参数 , 如果没有，这默认为gv:dot。其他可用引擎有 neato twopi circo fdp
- chl=<DOT_string>, 必选参数。注意
不支持 // 风格注释，urlencode换行符后可以支持//风格注释。不支持中文
Google官网的一些说明
- The graph attribute size should be not be used; use the Chart API parameter chs instead.
- The maximum number of nodes is 200, and the maximum for edges is 400.
- Anti-aliasing, transparency, and alternate fonts are not supported.
- The node attributes image and shapefile are not supported, and will result in an error if present.
- The graph attributes ratio, margin, and pad are not supported, and will be ignored if present.
第三条明确说了不支持alternate fonts。
一些演示
搜集一些来自网络的dot源码用来测试。
|
1 2 3 4 5 6 7 8 9 |
digraph { "A" [shape="circle"]; "B" [shape="rectangle"]; "C" [shape="diamond"]; "A" -> "B" [label="A to B"]; "B" -> "C" [label="B to C"]; "A" -> "C" [label="A to C"]; } |
效果如图：
更多的展示
|
1 2 3 4 5 6 7 8 9 10 11 |
digraph { "Back" [shape="egg" color="green" style="filled" fillcolor="yellow"]; "Forth" [shape="house" color="red"]; "Other" [shape="invtriangle" color="blue"]; "Back" -> "Forth" [color="orange" label="weee"]; "Forth" -> "Back" [color="purple" label="eeew"]; "Other" -> "Forth" "Other" -> "Back" } |
效果图
再来个状态机
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
digraph { node [shape=circle,fontsize=8,fixedsize=true,width=0.9]; edge [fontsize=8]; rankdir=LR; "low-priority" [shape="doublecircle" color="orange"]; "high-priority" [shape="doublecircle" color="orange"]; "s1" -> "low-priority"; "s2" -> "low-priority"; "s3" -> "low-priority"; "low-priority" -> "s4"; "low-priority" -> "s5"; "low-priority" -> "high-priority" [label="wait-time exceeded"]; "high-priority" -> "s4"; "high-priority" -> "s5"; } |
一个哈希表
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
digraph st2{ fontname = "Verdana"; fontsize = 10; rankdir=TB; node [fontname = "Verdana", fontsize = 10, color="skyblue", shape="record"]; edge [fontname = "Verdana", fontsize = 10, color="crimson", style="solid"]; st_hash_type [label="{<head>st_hash_type|(*compare)|(*hash)}"]; st_table_entry [label="{<head>st_table_entry|hash|key|record|<next>next}"]; st_table [label="{st_table|<type>type|num_bins|num_entries|<bins>bins}"]; st_table:bins -> st_table_entry:head; st_table:type -> st_hash_type:head; st_table_entry:next -> st_table_entry:head [style="dashed", color="forestgreen"]; } |
子图
注意子图命名必须以cluster为前缀，见官方说明。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
digraph abc{ node [shape="record"]; edge [style="dashed"]; a [style="filled", color="black", fillcolor="chartreuse"]; b; subgraph cluster_cd{ label="c and d"; bgcolor="mintcream"; c; d; } a -> b; b -> d; c -> d [color="red"]; } |
效果图
实现方式
实现方式很简单，需要有一个国外的虚拟主机或者VPS，用做代理来访问Google Chart API，将结果返回即可。代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php /** * proxy of google chart graphviz api * * $Id proxy.php tecbbs@qq.com 2015-5-29 $ **/ $api = "https://chart.googleapis.com/chart?"; $cht = "gv"; $chl = "graph {fontname=\"SimSun\";node{shape=box];a[label=\"nothing to do~\"];}"; $chof = "gif"; function curlGet($url) { $ch = curl_init(); curl_setopt ( $ch, CURLOPT_URL, $url ); curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 ); curl_setopt ( $ch, CURLOPT_SSL_VERIFYHOST, FALSE ); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, FALSE ); curl_setopt ( $ch, CURLOPT_HEADER, 0 ); $data = curl_exec ($ch); return $data; } $url = $api; $i = 0; $sum = count($_GET); foreach($_GET as $k => $v) { if($k == "chl" || $k == "chdl" || $k == "chxl") { $v = urlencode($v); } $i++; if($i<$sum) $url .= $k . "=" . $v . "&"; else $url .= $k . "=" . $v; } header("Content-Type: image/webp; charset=UTF-8"); $data = curlGet($url); die($data); ?> |
代码笔记
一开始不懂设置Response Header，返回的直接是图片的乱码，放在img src里可以显示，但是新窗口打开图片就全是乱码了。设置Response Header的方法：
|
1 |
header("Content-Type: image/webp; charset=UTF-8"); |
参考资料
|
1 2 3 4 |
[1]. http://www.cnblogs.com/CoolJie/archive/2012/07/17/graphviz.html [2]. http://steveliles.github.io/making_pretty_diagrams_with_graphviz.html [3]. https://developers.google.com/chart/image/docs/gallery/graphviz [4]. http://www.cnblogs.com/ainiaa/archive/2010/11/10/1873421.html |
访问其他类型的Google charts api也可以，比如数学公式，cht=tx即可
Pingback: 自建GraphViz API | 知行近思
http://guiquanz.me/2014/03/15/graphviz-dot-in-all/
wordpress插件找到的相关结果http://blog.flirble.org/2010/11/12/graphviz-demo/https://github.com/mdaines/viz.js