【超级图表】使用手册

超级图表使用指南

简介

DiscuzX 超级图表 是一款能将特定语法文本显示为图表的插件，目前支持Graphviz，Asymptote， 思维导图，Ditaa，Gnuplot，二维码，Message Sequence Chart，blockdiag，雷达图，图书封面等类型的图表。插件具有以下特点：

1. 论坛只存储图形描述语言的代码，图片通过远程接口生成并存储在远程服务器，不占用论坛空间
2. 支持图表类型取决于远程接口，新增功能时仅需要扩展远程接口，插件无需变动，扩展能力强
3. 提供可选的可视化编辑器（zxsq_editor），可按需安装

基本语法

 复制代码 隐藏代码
[plot 画图引擎 输出格式]
图形描述代码
[/plot]

另外，Markdown插件也支持使用超级图表，语法如下：

 复制代码 隐藏代码
```plot:画图引擎 输出格式
图形描述代码
```

画图引擎列表

引擎代码	名称	说明
gv:(dot,neato,fdp,sfdp,twopi,circo)	Graphviz	用于绘制DOT语言脚本描述的图形
asy	Asymptote	矢量绘图语言
blockdiag	Blockdiag	类似dot语言的一种绘制流程图的工具
cover(:ten)	图书封面	用于生成图书封面
ditaa	DIagrams Through Ascii Art	由Ascii Art生成图片的工具
gnuplot	gnuplot	绘图工具
markdown:(dot,neato,fdp,sfdp,twopi,circo)	Markdown思维导图	将Markdown转为dot语言用graphviz生成思维导图
msc	Message Sequence Chart	类似dot的一种生成消息序列图的工具
qr	二维码	生成给定字符串的二维码图片
radar	雷达图	从csv格式文本生成雷达图

实例

以下示例将使用Markdown语法，直接使用超级图表时使用[plot]标签即可。

Graphviz

 复制代码 隐藏代码
```plot:gv:dot svg
digraph finite_state_machine {
        rankdir=LR;
        size="8,5"
        node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
        node [shape = circle];
        LR_0 -> LR_2 [ label = "SS(B)" ];
        LR_0 -> LR_1 [ label = "SS(S)" ];
        LR_1 -> LR_3 [ label = "S($end)" ];
        LR_2 -> LR_6 [ label = "SS(b)" ];
        LR_2 -> LR_5 [ label = "SS(a)" ];
        LR_2 -> LR_4 [ label = "S(A)" ];
        LR_5 -> LR_7 [ label = "S(b)" ];
        LR_5 -> LR_5 [ label = "S(a)" ];
        LR_6 -> LR_6 [ label = "S(b)" ];
        LR_6 -> LR_5 [ label = "S(a)" ];
        LR_7 -> LR_8 [ label = "S(b)" ];
        LR_7 -> LR_5 [ label = "S(a)" ];
        LR_8 -> LR_6 [ label = "S(b)" ];
        LR_8 -> LR_5 [ label = "S(a)" ];
}
```

digraph finite_state_machine { rankdir=LR; size="8,5" node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8; node [shape = circle]; LR_0 -> LR_2 [ label = "SS(B)" ]; LR_0 -> LR_1 [ label = "SS(S)" ]; LR_1 -> LR_3 [ label = "S($end)" ]; LR_2 -> LR_6 [ label = "SS(b)" ]; LR_2 -> LR_5 [ label = "SS(a)" ]; LR_2 -> LR_4 [ label = "S(A)" ]; LR_5 -> LR_7 [ label = "S(b)" ]; LR_5 -> LR_5 [ label = "S(a)" ]; LR_6 -> LR_6 [ label = "S(b)" ]; LR_6 -> LR_5 [ label = "S(a)" ]; LR_7 -> LR_8 [ label = "S(b)" ]; LR_7 -> LR_5 [ label = "S(a)" ]; LR_8 -> LR_6 [ label = "S(b)" ]; LR_8 -> LR_5 [ label = "S(a)" ]; }

Asymptote矢量绘图

 复制代码 隐藏代码
```plot:asy
import math;
import graph;
size(0,400);

real f(real t) {return 2*cos(t);}
pair F(real x) {return (x,f(x));}

draw(polargraph(f,0,pi,operator ..));

defaultpen(fontsize(20pt));

xaxis("$x$");
yaxis("$y$");

real theta=radians(50);
real r=f(theta);
draw("$\theta$",arc((0,0),0.5,0,degrees(theta)),red,Arrow,PenMargins);

pair z=polar(r,theta);
draw(z--(z.x,0),dotted+red);
draw((0,0)--(z.x,0),dotted+red);
label("$r\cos\theta$",(0.5*z.x,0),0.5*S,red);
label("$r\sin\theta$",(z.x,0.5*z.y),0.5*E,red);
dot("$(x,y)$",z,N);
draw("r",(0,0)--z,0.5*unit(z)*I,blue,Arrow,DotMargin);

dot("$(a,0)$",(1,0),NE);
dot("$(2a,0)$",(2,0),NE);
```

import math; import graph; size(0,400); real f(real t) {return 2*cos(t);} pair F(real x) {return (x,f(x));} draw(polargraph(f,0,pi,operator ..)); defaultpen(fontsize(20pt)); xaxis("$x$"); yaxis("$y$"); real theta=radians(50); real r=f(theta); draw("$\theta$",arc((0,0),0.5,0,degrees(theta)),red,Arrow,PenMargins); pair z=polar(r,theta); draw(z--(z.x,0),dotted+red); draw((0,0)--(z.x,0),dotted+red); label("$r\cos\theta$",(0.5*z.x,0),0.5*S,red); label("$r\sin\theta$",(z.x,0.5*z.y),0.5*E,red); dot("$(x,y)$",z,N); draw("r",(0,0)--z,0.5*unit(z)*I,blue,Arrow,DotMargin); dot("$(a,0)$",(1,0),NE); dot("$(2a,0)$",(2,0),NE);

blockdiag

 复制代码 隐藏代码
```plot:blockdiag
blockdiag {
  default_node_color = lightyellow;
  default_group_color = lightgreen;
  default_linecolor = magenta;
  default_textcolor = red;

  A -> B -> C;
       B -> D;
  group {
    C; D;
  }
}
```

blockdiag { default_node_color = lightyellow; default_group_color = lightgreen; default_linecolor = magenta; default_textcolor = red; A -> B -> C; B -> D; group { C; D; } }

图书封面

 复制代码 隐藏代码
```plot:cover
图书标题
作者
```

图书标题 作者

ditaa

 复制代码 隐藏代码
```plot:ditaa
       +----------+ edit +----------+   input +----------+ compile +----------+
       |  cPNK    |      |  cRED    |         |   cGRE   |         |  cPNK    |
       | refined  |<-----+ h,cpp    +-------->+ compiler,+-------->+Executable|
       |   h,cpp  |      |          |         | linker   |         |   File   |
       | {s}      |      |  {io}    |         |          |         |    {s}   |
       +----------+      +----+-----+         +----------+         +----------+
                              | input
                              v
                         +----------+
                         |  cGRE    |
                         | doxygen  |
                         |          |
                         +----+-----+
                              | process
                              v
                         +----------+
                         |  cPNK    |
                         | Doxgen   |
                         | Document |
                         |    {d}   |
                         +----------+
```

+----------+ edit +----------+ input +----------+ compile +----------+ | cPNK | | cRED | | cGRE | | cPNK | | refined |<-----+ h,cpp +-------->+ compiler,+-------->+Executable| | h,cpp | | | | linker | | File | | {s} | | {io} | | | | {s} | +----------+ +----+-----+ +----------+ +----------+ | input v +----------+ | cGRE | | doxygen | | | +----+-----+ | process v +----------+ | cPNK | | Doxgen | | Document | | {d} | +----------+

思维导图

 复制代码 隐藏代码
```plot:markdown
# plot
## graphviz
### dot
### neato
### fdp
### sfdp
### twopi
### circo
## ditaa
## gnuplot
## markdown mindmap
### graphviz
```

# plot ## graphviz ### dot ### neato ### fdp ### sfdp ### twopi ### circo ## ditaa ## gnuplot ## markdown mindmap ### graphviz

gnuplot

 复制代码 隐藏代码
```plot:gnuplot
plot sin(x)*x;
```

plot sin(x)*x;

Message Sequence Chart

 复制代码 隐藏代码
```plot:msc
# Fictional client-server protocol
msc {
 arcgradient = 8;

 a [label="Client"],b [label="Server"];

 a=>b [label="data1"];
 a-xb [label="data2"];
 a=>b [label="data3"];
 a<=b [label="ack1, nack2"];
 a=>b [label="data2", arcskip="1"];
 |||;
 a<=b [label="ack3"];
 |||;
}
```

# Fictional client-server protocol msc { arcgradient = 8; a [label="Client"],b [label="Server"]; a=>b [label="data1"]; a-xb [label="data2"]; a=>b [label="data3"]; a<=b [label="ack1, nack2"]; a=>b [label="data2", arcskip="1"]; |||; a<=b [label="ack3"]; |||; }

二维码

 复制代码 隐藏代码
```plot:qr
http://www.tecbbs.com
```

http://www.tecbbs.com

雷达图

 复制代码 隐藏代码
```plot:radar
name,价格,易用性,性能,外观,功能
iphoneX,.5,.9,1,.9,.8
Mi6,.8,.9,.9,.8,.8
P10,.6,.9,.9,.8,.8
```

name,价格,易用性,性能,外观,功能 iphoneX,.5,.9,1,.9,.8 Mi6,.8,.9,.9,.8,.8 P10,.6,.9,.9,.8,.8

$f(x)$

```plot:asy import math; import graph; size(0,400); real f(real t) {return 2*cos(t);} pair F(real x) {return (x,f(x));} draw(polargraph(f,0,pi,operator ..)); defaultpen(fontsize(20pt)); xaxis("$x$"); yaxis("$y$"); real theta=radians(50); real r=f(theta); draw("$\theta$",arc((0,0),0.5,0,degrees(theta)),red,Arrow,PenMargins); pair z=polar(r,theta); draw(z--(z.x,0),dotted+red); draw((0,0)--(z.x,0),dotted+red); label("$r\cos\theta$",(0.5*z.x,0),0.5*S,red); label("$r\sin\theta$",(z.x,0.5*z.y),0.5*E,red); dot("$(x,y)$",z,N); draw("r",(0,0)--z,0.5*unit(z)*I,blue,Arrow,DotMargin); dot("$(a,0)$",(1,0),NE); dot("$(2a,0)$",(2,0),NE); ```

[/flow]