jQuery.Gantt のそれと同じく。
「こういう紛らわしい紹介すんなや」コレクションの追加である。jquery.flowchart (GitHub)。
例によって「10 Best jQuery Graph-Chart Libraries With Demo & Comparison Table」というノリでほかのと同列に並べてるのが「やっぱし頭おかしい」ヤツ。たぶんこの著者は「Compari」てないし、「Demo」てない。「雰囲気よさそーっ」しか見てないと思う。
jquery.flowchart の出来が悪いとは言ってない。そういうことではなくて、「どういう評価基準で選んだベスト10なのか」が、このライブラリが入るようでは他に並んでるのと較べると明らかにヘンなので「頭おかしい」と言ってるだけ。
GitHub に行って説明読むとわかるんだけれど、これは UltIDE なる「General purpose IDE and Flowchart editor」という大きなプロジェクトの一部をライブラリとして切り出したものだそうだ。だから「それを作るものとしては不可欠で良いもの」ではあろうと思う。けれど「とにかくこういうグラフを描きたいのだ、すぐに」というのには全然向かない(これは後述)。のであるならば、どうしてこれが Cytoscape.js などと同列に並ぶのか。並べるなら「どういうものだ」ということを明確に説明すべきである。何の説明もないよ、10 Best jQuery Graph-Chart Libraries With Demo & Comparison Table には。
さて、実際に「お試してみた」わけだが、一言で言えば要するに「多分あなたが求めるより一段階から二段階程度ローレベルな API である」ということである。つまり、「何か自作の大きなものを作るための部品」と考えるつもりなら多分間違いなく「そう悪いものではない」。けど「お前、やってみてないだろ!」と疑いたくなるのはこのドキュメントを Good だと言ってることだ。どこが? いや、「最も大事なこと」が書かれてないんだけど。
お試したというよりは、「完全にほぼコピペ」:
ただのコピペなのに1時間も徘徊したのは、「不可欠なこと」が何にも説明されてなかったからだ。上のコードはこうなってる:
1 <html>
2 <head jang="ja">
3 <meta charset="UTF-8">
4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
6 <script src="http://sebastien.drouyer.com/jquery.flowchart-demo/jquery.flowchart/jquery.flowchart.js"></script>
7
8 <link rel="stylesheet"
9 href="http://sebastien.drouyer.com/jquery.flowchart-demo/jquery.flowchart/jquery.flowchart.min.css">
10 <link rel="stylesheet"
11 href="http://sebastien.drouyer.com/jquery.flowchart-demo/stylesheets/custom.css">
12
13 </head>
14 <body>
15
16 <div id="container"
17 class="flowchart-example-container"
18 ></div>
19 <script>
20 $(document).ready(function() {
21 var data = {
22 operators: {
23 operator1: {
24
25 top: 20,
26 left: 20,
27
28 properties: {
29 title: 'Operator 1',
30 inputs: {},
31 outputs: {
32 output_1: {
33 label: 'Output 1',
34 }
35 }
36 }
37 },
38 operator2: {
39
40 top: 80,
41 left: 300,
42
43 properties: {
44 title: 'Operator 2',
45 inputs: {
46 input_1: {
47 label: 'Input 1',
48 },
49 input_2: {
50 label: 'Input 2',
51 },
52 },
53 outputs: {}
54 }
55 },
56 },
57 links: {
58 link_1: {
59 fromOperator: 'operator1',
60 fromConnector: 'output_1',
61 toOperator: 'operator2',
62 toConnector: 'input_2',
63 },
64 }
65 };
66
67 // Apply the plugin on a standard, empty div...
68 $('#container').flowchart({
69 data: data
70 });
71 });
72 </script>
73
74 </body>
75 </html>
今回の場合一番重大なのは「custom.css」(と対応する class="flowchart-example-container")で、すなわち custom.css そのものを使う使わないに関わらず、「ある程度自力でスタイルを設定しないと、何も表示されない」ということ。デフォルトがないのよ。
2つ目の「ローレベル」は、すぐみて気付く? 位置決めは全部自力で、なのよ。賢いレイアウトマネージャのようなものはない。まぁこれは UltIDE の部品に過ぎないことを考えればある程度当然なわけだけれどもね、けど「簡単にグラフを描きたいだけなんじゃワシは」と思ってこういった「xx Best ほにゃらら」に飛び付くレベルのエンジニアには、落胆以外の何者でもないんじゃないのかね、と思うわよ。(別にそう説明してるならワシだって文句なんか言わんよ。)
あとはドラッグして云々だとか、マウスホイールで云々と言ったことも全て「自分で書く必要がある」ことは、デモで説明されてる。うん、素晴らしいドキュメントだ。
てわけで、jquery.flowchart、おススメでっす!!!!!!!!!!!!!!!!!!!!
あ、ちなみに「紛らわしい」なんだけどね、この名前から「フローチャートが描けるぜっ」て誰だって思うよねぇ? これさぁ、フローチャートなのかい? (ワタシなんぞは Windows DirectShow の graphedt を思い出す。)
実際 jquery+flowchart という検索をすると、これとは違うものが結構ヒットするみたいなので、「本当にお望みのもの」てのは多分あるんじゃないかと想像してる。つまり普通に考えりゃぁ、たとえ jquery.flowchart がそう悪いものでもないとしたって、10 Best jQuery Graph-Chart Libraries With Demo & Comparison Table でこやつを紹介してしまってくれているのは「大きなお世話」という名のノイズである。
あと、もしもほんとに手軽にこれに近いものを作りたいなら、(javascript でクライアントサイドだけでやることにこだわりがないなら) graphviz が圧倒的に簡単だし、ちょっとだけ目的のものを作るのはツラそうだけど Cytoscape.js でも少なくとも「近いもの」はすぐに作れるかもしれないと思う。
