最近は、JavaScriptのUIライブラリは、Vue.jsを使用することが多いのですが、Riot.jsも軽量で使いやすいので好きです。

Riot.jsとは？

React や Angular などに代表される JavaScript のUI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴のJavaScriptのUIライブラリです。
少し、プログラムをやったことのある人なら、ループの回しかたや条件文の記述なども直感的でわかりやすく、コンポーネントベースの UI 開発から複雑さを取り除いてくれます。

今回のグラフを作成するために、次のようにライブラリをCDNで読み込みます。

一番上のが、Riot.js 。二つ目が、RiotGearのライブラリ。最後がChart.jsのライブラリとなります。

円グラフを描写してみる

実際の動作は、下記のようになります。

typeを設定して、dataとoptionsの設定については、Chart.jsの公式サイトをみると同じなのでわかると思います。

棒グラフを描写してみる。

棒グラフも上記のように記載すると記述することができます。
細かい設定を色々としていますが、Chart.jsの公式サイトで記載されていることと同じです。

上記の内容は、RIOTGEARの公式サイトにサンプルが記載されています。
RiotGearのサイトには、色々なコンポーネントが記載されています。
Moment.jsを用いたDatepickerなども記載されているので、興味のある方はぜひ、ご覧になってください。