• 映画
    ドラマ『MR. ROBOT / ミスター・ロボット』が実に残念だった件。天才ハッカーvs大企業はどっちが勝つのか
  • お金
    毎週更新【toto・BIG】は本当に6億円当選するのか。遂に当選!?実際買ってみた結果...

f:id:chousiteki:20161116234238j:plain

はてなブログでグラフを使ってみよう

グラフを記事中に載せる方法はたくさんあります。

自分で作った画像を貼るとかも良いんですが、すべてはてなブログ内で完結すると楽ですよね。

そこで今回はChart.jsというものを紹介したいと思います。

Chart.jsの使い方については散々既出ですが、備忘録も兼ねて書いていきます。

お使いのブラウザはcanvasに対応していません。

出来上がるサンプルはこんな感じです。

グラフを触ってみてください!!

 

こいつ・・・動くぞ!

 

ってな感じをわかっていただけましたでしょうか?

画像じゃなくてChart.jsを使うメリットは「こういった動きが出るという点」があります。

他にもメリットがあるのでまとめておきます。

 

Chart.jsを使うメリット

  • 動きが出るという点
  • はてなブログ内で完結する点(その他ツールを使わなくてもよい)
  • 数値を変えたい、追加したいと思った時、簡単に更新できる

この3点に集約されると思います。

メリットがわかったところで、Chart.jsについてみていきましょう。

 

Chart.jsってなんなの?

折れ線グラフ、棒グラフ、円グラフ、全部で8種類のグラフが簡単に描けるjavascriptのライブラリのことなんですが...

 

こんなこと言われてもピンときませんよね。

今回はグラフを描画することが目的なのであまり詳しいことまで知る必要はないと思います。

 

ふ~ん。いろんなグラフ書けるんだと思っていただければ大丈夫です。

 

 

コピペで完成!!超簡単グラフ作成

これから載せるコードをHTML編集画面にコピペしてください。

*view rawを押すとコピペしやすくなります。

コード1

chart.js-CDN

まず、グラフを書きたい記事にこのコードを追加してください。

 

これはCDNというものなのですが、これをページ中に書いておかないとchart.jsが利用できないのでこれは記事中一回だけグラフを書く前の場所に追加してください。

 

コード2

canvas

 Chart.jsはHTMLのキャンバスを利用して描画します。

ですのでこのコードはグラフを挿入したい所にコピペしてください。

 

コード3

chart.js-bar

 最後はコチラ。

ここがグラフのキモとなる部分です。

 

どこを変えるとどう変わるかは実際やっていただくとわかりやすいのですが、一応少し解説しておきます。

 

 コード2の

<canvas id="myChart

 コード3の

var ctx = document.getElementById("myChart");

 太字部分は共通しています。

 

コード2では「myChart」という名前のグラフをここに書くという指示

コード3では「myChart」という名前のグラフがどういった内容かの指示をしています。

 

ですのでそれぞれ違う名前にしてしまうとグラフが表示されません。

また一つのページに2つ以上のグラフを表示したいときは、違う名前(id)にしないと正しく表示されませんので気を付けて!!

 

 

コード3の

type: 'bar',

この部分はグラフのタイプを表しています。

折れ線グラフは'line'です。

 

labels: ["シーズン1", "シーズン2", "シーズン3", "シーズン4", "シーズン5", "シーズン6"],

 こちらは横軸。好きなものに書き換えてください。

 

label: '満足度',

 ここは棒グラフがなにを表しているかです。好きなものに書き換えてください。

 

data: [90, 95, 80, 92, 100, 28],

 ここはグラフ化したいデータを打ち込むところです。好きな数字に書き換えてください。

 

backgroundColor: '#f58E7E',

 ここはグラフの色をいれるところです。

 好きな色を入れるとその色にグラフが変わります。

色サンプル

  • #58be80 緑 
  • #007ac3 青
  • #fcb33f 黄 

 

text: '海外ドラマLost(ロスト)の満足度',

こちらは グラフのタイトルです。

 

beginAtZero:true

これはグラフ表示を0から始めるために記述されています。

逆に端折りたい方は削除してください。

 

 

ここまででひとまず解説終了です。

 

コード1はページに一つだけ。

コード2とコード3はセットと覚えておいてください。

 

もっともっとできることがありますので詳しくは公式リファレンスをお読みください。

 Chart.js | Documentation

  

応用編 グラフの最大値の指定

探すのに苦労したので、実は今回のメインはコレです。

 

Chart.jsはグラフをうまく自動的に最大値を決定してくれるんですが自分で決めたい時もあると思います。

 上の例で出したグラフは最大値が100になってますよね?

別に指定したわけではなく勝手に100にしてくれています。

これを変えたい。

お使いのブラウザはcanvasに対応していません。

 最大値最小値を指定したグラフはこんな感じ

 

先ほどのコード3の最後の部分をこのように書き換えます。

scales: {

            yAxes: [{

                ticks: {

                    max:200,
                    min:30

                }

            }]

        }

maxとminを好きな数字に指定すればOK

これで最大値最小値が指定できました。

 

まとめ

はてなブログの記事にグラフを挿入したい方は是非コピペしてみてください。

特にグラフの数値を途中で書き換えたい方は必見です。コードをちょっと変えるだけですぐ反映されます。

Sponsored Link

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事