コスパ重視で生きたい人生だった

なるべく楽して生きて行きたい30代サラリーマンのブログ

Javascriptでグラフを書いてみる その1

f:id:dett0826:20151011011943j:plain

ブログでグラフを使いたいときは、Excelなどでグラフの画像を作成してました。私です。
最近、Javascriptを使うとグラフを簡単に書けると知ったので、試してみました。
以前からJavascriptに興味はあったものの、ずっと食わず嫌いだったので、いい機会。

これはいいものですね。

Chart.jsでグラフ描画

Javascriptでグラフを書くときは、Chart.jsを使います。
はてなブログでこれを使うときは、外部から読み込ませる必要があり、ちょっと手間です。
私もてこずりました。www.cospa14.com

ただ、これができればあとは簡単。
コードを数十行書くだけで、お手軽にグラフ作成。

www.chartjs.org



全部で6種類のグラフを書けますが、今回は3種類を紹介。
残りは次回。

ここも参考にしました。
Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG


ドーナツ型グラフ


サンプルコード

<canvas id="sample" height="300" width="300"></canvas>
<script>
var doughnutData = [
  {
   value: 30,
   color:"#aaf2fb"
  },
  {
   value: 50,
   color: "#ffb6b9"
  },
  {
   value: 120,
   color: "#ffe361"
  },
   {
   value: 170,
   color: "#fbaa6e"
  },
   {
   value: 70,
   color: "#A8BECB"
  }
];
 
var myDoughnut = new Chart(document.getElementById("sample").
getContext("2d")).Doughnut(doughnutData);
 
</script>
折れ線グラフ


サンプルコード

<canvas id="sample2" height="300" width="300"></canvas>
<script>

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var myLineChart = new Chart(document.getElementById("sample2").getContext("2d")).Line(data);

</script>
棒グラフ

サンプルコード

<canvas id="bar" height="300" width="300"></canvas>
<script>
var ctx = document.getElementById("bar").getContext("2d");
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var myBarChart = new Chart(ctx).Bar(data);
</script>