年間の統計を出すにはまだちょっと早いですが、昨年作成した入館者数報告のポスターを、最近マイブームのChart.jsでWebサイトでも表示可能なグラフにしてみました。
グラフについて
- オープンソースのスクリプト、Chart.jsの2.2.1を使っています。
- グラフの色は、元ポスターと同様、こちらの記事を参考にしています。
- グラフの数値は適当です。
- 凡例をクリックすると該当の項目が非表示になるので、項目間を比較するのにも便利です。
- せっかくなので、コードを置いておきます。ご自由にカスタマイズしてお使いください。申し訳有りませんが、自己責任でお願いします。 （Chart.jsはMIT Licenseで提供されています。）
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> <p> <canvas id="myChart" width="600" height="400">お使いのブラウザはcanvasに対応していません。</canvas> </p> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."], datasets: [{ label: "学部学生", borderWidth:1, backgroundColor: "#121554", borderColor: "#121554", data: [30000, 28000, 26000, 35000, 38000, 40000, 41000, 28000, 27000, 30000, 32000, 31000] }, { label: "大学院生", borderWidth:1, backgroundColor: "#1d3681", borderColor: "#1d3681", data: [15000, 14000, 13000, 17500, 19000, 20000, 25000, 14000, 13500, 15000, 16000, 15500] },{ label: "教員", borderWidth:1, backgroundColor: "#2e70a7", borderColor: "#2e70a7", data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000,1000,1000] },{ label: "職員", borderWidth:1, backgroundColor: "#4eadc7", borderColor: "#4eadc7", data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000,1000,1000] },{ label: "一般利用者", borderWidth:1, backgroundColor: "#a7d8bf", borderColor: "#a7d8bf", data: [3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000, 3000,3000,3000] }] }, options: { title: { display: true, text: '2016年図書館入館者数のご報告', //グラフの見出し padding:3 }, scales: { xAxes: [{ stacked: true, //積み上げ棒グラフにする設定 categoryPercentage:0.4 //棒グラフの太さ }], yAxes: [{ stacked: true //積み上げ棒グラフにする設定 }] }, legend: { labels: { boxWidth:30, padding:20 //凡例の各要素間の距離 }, display: true }, tooltips:{ mode:'label' //マウスオーバー時に表示されるtooltip } } }); </script>
Chat.jsカスタマイズのTips
慣れている方は、簡単に使えると思いますが、自分がさわっていて、つまりやすそうだなと思ったところを記しておきます。
- 同じ要素の中の最後の項目の文末には","(カンマ)をつけません。きちんと動かないときは大体必要なカンマが抜けているか、必要でないカンマがついているかのどちらかということが多いです。
- オプションの項目名などは大文字小文字の区別があるので、Documentationのとおり、正確に記述しましょう。
- オプションが豊富に用意されているので、Chart.jsのDocumentationをきちんと読めば「こういう風にしたい！」ということは大体解決します。
ありがとうございました。
