Read Article

Chart.jsで作る「kintoneのダッシュボード」

Chart.jsで作る「kintoneのダッシュボード」

こんにちは。武井です。

ダッシュボードの季節ですね。

kintoneのグラフ解析

kintoneの標準グラフにはHigh Chartsが採用されているようです。

High Chartsの特徴としては、

  • 見た目が綺麗
  • 使用に便利
  • カスタムに融通が利く

と最強らしいのですが、有料です。

一方、今回使用するChart.jsは無料チャートライブラリの中では一強の様相を呈しています。
ただし、Chart.jsはやや融通の利かない部分があります。

ダッシュボード作ってみた

201609131013

こんなん作ってみました。

詳しくは下記記事に譲りますが、
kintoneの標準機能にないグラフを厳選してChart.jsで実現したところが売りとなっております。

■Chart.jsを使ってダッシュボードを作ってみよう!
https://cybozudev.zendesk.com/hc/ja/articles/214479043

上記記事と参考画像では説明不足だったのですが、
下図のようなインタフェースも導入しているので、非常に使い勝手はよいです。

dashboard

右下部分が空白地帯でちょっと寂しいのは作業時間の関係上となります(゚゚;)

ダッシュボードをポータルに表示する

さて、kintone公式ではめったなことでDOMを操作してはいけないことになっていますので、
上記記事ではアプリ内にダッシュボードを表示していますが、
こちらでは例によってDOMをいじりまくることでポータルにダッシュボードを表示してしまう魔改造を披露していきたいと思います。

完成イメージ

portaldashboard

ぶっちゃけ使いやすさは圧倒的にこちらですね!

コードを一応すべて載せますが、アプリ版との違いは、ほぼほぼ「// URLが変更される場合のチャート書き直し処理」からcreateSlider関数までの部分のみです。

感想

他のデベロッパーサイト記事と比して私の記事のコード量に圧倒されますね(゜o ゜;)

Chart.jsではできないことが割と多いので、「いかにChart.jsを要件に寄せるか」ではなく「いかに要件をChart.jsに寄せるか」が問われます(SIer的に考えて)。

この記事を書いた人

武井 琢治
武井 琢治
サイボウズスタートアップス株式会社の武井と申します。
kintoneカスタマイズを行う上での勘所を敷衍して発信していきたいと考えております。
kintoneは中国語対応しているため、中国語でも発信していきたいと思います。
大家好,我叫QB,请多关照。我喜欢吃肠粉。

趣味は漢字です。
所持する資格は、日本漢字能力検定一級です。
URL :
TRACKBACK URL :

LEAVE A REPLY

*
*
* (公開されません)

Return Top