Chart.jsでWebページにグラフを描く

Chart.jsというツールを用いて、Webページ上にグラフをきれいに描くことができる。
ここでは、例として正規分布関数を描画する処理を挙げる。

<!DOCTYPE HTML>
<html lang="" >
  <head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Chart.js</title>
  </head>

  <body>
    <div class="chart-container" style="position: relative; height:50vh; width:50vw">
      <canvas id="myChart"></canvas>
    </div>
  </body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
  <script type="text/javascript" src="dist_normal.js"></script>
</html>

<canvas>で描画領域を設定。<script>で、Chart.jsのライブラリと実際グラフを描画しているスクリプトを参照。

以下は、javascriptファイル dist_normal.jsの中身。

var myChart;
var mu = 0.0; 
var sigma = 1.0; 
var xmin = -10;
var xmax = 10;
var nx = 200;

function calc_func() {
  var data = [];
  for(let i=0; i<nx+1; i++) { 
    var x = xmin+(xmax-xmin)/nx*i;
    var y = 1.0/Math.sqrt(2.0*Math.PI*sigma*sigma)*Math.exp(-1.0*(x-mu)*(x-mu)/(2.0*sigma*sigma));
    data.push({x:x, y:y});
  }
  return data;
}

function plotChart(){
  const ctx = document.getElementById("myChart").getContext('2d');

  if(myChart){
    myChart.destroy();
  }
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [{
        data: calc_func(),
        backgroundColor: 'RGBA(0,0,255, 1)',
        borderColor: 'RGBA(0,0,255, 1)',
        borderWidth: 1,
        showLine: true,
        fill: false,
        lineTension: 0,
        pointRadius: 0,
        pointHoverRadius: 10,
        pointHoverBackgroundColor: "rgba(255, 140, 0, 0.6)",
        pointHoverBorderColor: "rgba(255, 140, 0, 0.6)",
        pointHoverBorderWidth: 10,
        pointHitRadius: 10,
      }]
    },
    options: {
      animation: false,
      legend: { display: false },
      scales: {
        yAxes: [{scaleLabel: {display: true, labelString: 'f(x)',},  }],
        xAxes: [{
          scaleLabel: {display: true, labelString: 'x',},
          type: 'linear',
          position: 'bottom',
          ticks: { min: xmin, max: xmax, }
        }]
      },
    }
  });
}

plotChart();

関数calc_funcで、正規分布関数を計算している。ここでは、xが-10から10まで200点とっている(xmin=-10, xmax=10, nx=200)。また、平均mu=0.0、標準偏差sigma=1.0としている。

関数plotChartでグラフを描画している。datasetsでcalc_funcを呼び、x,yのデータをセットする。描画のオプションは、だいたい見ればわかると思う。いろいろ変えてみると面白い。optionsで凡例や軸の設定ができる。

これをそのまま描画すると以下のグラフが出力される。実際の描画したグラフの線にカーソルを合わせると、その値が出力される。