「 + Sparklines」という言い回しには少しは注意。

jquery: Tabulator 出来てみた⁶ + Sparklines, その他グラフ系フォーマッタ

前置き(1): 「Tabulator は Sparklines れるぜっ」てのはちげーぞ

一応ね。

読めない人、ならともかく、「英語読まない人」が非常に多いのでね、こういうことはちゃんと言っときたいのよ。Sparklines に書いてあること:

すなわち Tabulator が提供してるのは「フォーマッタのカスタマイズ性」であって、「jQuery Sparklines 連携そのもの」ではない、つーことね。また、jQuery Sparklines の、まぁ言ってしまえば「しょぼさ」について知っている人が「なんだよ、jQuery Sparklines しか出来ねーのか」てのも同じく違う。何使ってもいい。

前置き(2): sparkline てなに

ここをそもそも理解してないとヘンなことになるので注意してくれい。jQuery Sparklines のことを知る前に、(残念ながらまだ日本語訳がないみたいだけど)Wikipedia の記事を読んで欲しい。

何が言いたいかと言うと、これを知らないと jQuery Sparklines が「しょぼくて何も出来ないライブラリ」にみえる、つーこと。そうではなくて、まさに「Sparkline を作るライブラリ」なので、これで十分なのだ。機能豊富なグラフを描きたいならこのライブラリを選ぶことそのものが間違い。

逆に「Sparkline だからこそ」、表に埋め込むのに相応しいのである、てことね。よろしい?

まずは jQuery Sparkline 単独でお試す

公式ドキュメントはなかなかによろしくない出来(特に box チャート)だが、まぁすぐにわかるであろう。例えばこんなだ:

何をしてるかは、「フレームのソースを表示」で見てくれればわかる。ちなみにデータは気象庁の「過去の気象データ・ダウンロード」から入手した、ある地点の 2017-01-03 から 2018-01-03 までの平均気温。

てわけでカスタムフォーマッタとして jQuery Sparklines を組み込む

Sparklines を猿真似れば簡単。ついでに「jquery: Tabulator 出来てみた4(複数選択に反応して plotly.js、等)」も一緒に。こういうことだと思うんだよね、「表にはシンプルな sparkline、詳細にみる目的で高機能なグラフ」。

setTimeout してる意味については「give cell enough time to be added to the DOM before calling sparkline formatter」と説明されてるが、やらないとどうなるのかとかそういった説明はなし。たぶん ajax data loading しようとする場合に大きく影響してくるんだとは思うけれど、ただ、シカケとしては不十分な気がしないでもないよね、「何か完了イベント」みたいなのが用意されてない、てことだもの。(setTimeout 有無の両方版をここに貼り付けようかとも思ったが、ページがデカくなるのでやめた。)

データは同じく気象庁の「過去の気象データ・ダウンロード」から入手した 2017-01-03 から 2018-01-03 までの平均気温。

その他グラフ系フォーマッタ

「グラフ系」というか、「テキストではないビジュアルな」というか。まぁ公式サイト行けば真っ先に目に飛び込んでくるわけなので、あえて紹介するまでもないかなぁとは思わないでもない。Formatting Data をみれば、カスタまなくていい出来合いのフォーマッタが用意されていて、そういった「かっちょいい」のがいくつかあるのがわかる。

「出来合いの」が「大量に」あることがインフラの良し悪しである、てことはなくて、こういったものは案外自由度がなくてかえって辛かったりすることもあるわけなので、提供されてる「最小限」はまぁ文句が出にくい無難なものたちであろう。全部紹介する意味はないので、「progress」だけやってみる。百分率なデータに相応しい表現なので、気象庁の「過去の気象データ・ダウンロード」から入手した 2017-01-03 から 2018-01-03 までの平均湿度の月ごと平均に使ってみる:

ほかのサードパーティライブラリを必要としないのがいいっちゃぁいい。