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で凡例や軸の設定ができる。
これをそのまま描画すると以下のグラフが出力される。実際の描画したグラフの線にカーソルを合わせると、その値が出力される。
