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源码用来测试。
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"];
}
效果如图：
更多的展示
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"
}
效果图
再来个状态机
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";
}
一个哈希表
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为前缀，见官方说明。
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，将结果返回即可。代码如下
<?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的方法：
header("Content-Type: image/webp; charset=UTF-8");
参考资料
[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