はてなブログでChart.jsを使ってみました！
なんとなく、はてなブログの中でJavascript使えないのかなーって調べ始めたのがきっかけで、調べてみるとなんと使えるそうな！
ということで早速使ってみましょう！
今回は円グラフを作ってみましたよ！
使用したのは「Chart.js」というライブラリ。
jQueryが不要で簡単にグラフが作れるということで実験には丁度いいかなと。
せっかくなので今の自分のブログ記事をグラフ化してみましょう。これで自分の傾向が分かってくるはず！
まずはグラフの前にグラフ化する為のデータを。
2週間で書いたブログ記事の分類（全18記事）
| 雑記 | 7 |
|---|---|
| アニメ | 5 |
| IT系 | 3 |
| 結婚系 | 1 |
| 着物 | 1 |
| 自己紹介 | 1 |
ふむ。方向性、丸わかりですね...。ブログとしての方向性も見えてきているかもしれません笑
さて、ここからJavascriptの登場です！
まずはコード全体。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script type="text/javascript">// <![CDATA[
var chartbox = document.getElementById('chartbox');
chartbox.insertAdjacentHTML('beforebegin','<canvas id="myChart"></canvas>');
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: "doughnut",
data: {
labels: ["雑記", "アニメ", "IT系", "結婚系", "着物", "自己紹介"],
datasets: [
{
data: [7, 5, 3, 1, 1, 1],
backgroundColor: [
"rgb(255, 127, 127)",
"rgb(255, 153, 153)",
"rgb(255, 169, 169)",
"rgb(255, 180, 180)",
"rgb(255, 190, 190)",
"rgb(255, 200, 200)"
]
}
]
}
});
// ]]><script>
そしてもう１つ。グラフを表示したい場所に下記のHTMLタグを追加します。
<div id="chartbox"></div>
やることはこれだけ！あとは「どこに追加するの？」という話ですが、それははてなブログの記事を書く方はなんとなく想像つくでしょうか。
そうです。あのHTMLを直書きする場所です。そこじゃないとダメなんです！！笑
ではここからは順番に行きましょう。
ブログ記事でJavaScriptを実行する。
まずは普通にブログ記事を書きます。
なのでこの時は「編集[見たまま]」でも大丈夫ですよ。
記事がある程度まとまって、グラフを作る状態まで来たら、「HTML編集」を選択しましょう。
保存しなくても切り替えられるので、そのままクリック！
画面が切り替わったら、まずはJavascriptのコードだけコピーしてみましょう。
ペーストはテキストエディタ内の一番下で。
HTMLが出力される流れの問題になっちゃうのですが、ひとまず一番下に追加してみましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script type="text/javascript">// <![CDATA[
var chartbox = document.getElementById('chartbox');
chartbox.insertAdjacentHTML('beforebegin','<canvas id="myChart"></canvas>');
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: "doughnut",
data: {
labels: ["雑記", "アニメ", "IT系", "結婚系", "着物", "自己紹介"],
datasets: [
{
data: [7, 5, 3, 1, 1, 1],
backgroundColor: [
"rgb(255, 127, 127)",
"rgb(255, 153, 153)",
"rgb(255, 169, 169)",
"rgb(255, 180, 180)",
"rgb(255, 190, 190)",
"rgb(255, 200, 200)"
]
}
]
}
});
// ]]><script>
この時、label、data、backgroundColorは各自で調整ください。
- ・label:データ名
- ・data:データ値
- ・backgroundColor:グラフ背景色
さて、ここまで来たらあと一歩です！
グラフを表示したい場所にHTMLコードをコピペしてください。
<div id="chartbox"></div>
この「id="chartbox"」を目印にJavascriptが実行されますので、ここが一番大事です！
そうするとーーーー
こんな感じのグラフが出てきます！！
せっかくなので表と比べてみると...
| 雑記 | 7 |
|---|---|
| アニメ | 5 |
| IT系 | 3 |
| 結婚系 | 1 |
| 着物 | 1 |
| 自己紹介 | 1 |
やっぱ見やすい上に、なんかわくわくしますね。数字直接出すよりやっぱり色つきのグラフが良いです。
結論、やっぱりJavascriptがあるとなんか記事が華やかになる！！
Javascripterなうぇずでした！
