JavaScript
chart.js

Chart.jsで散布図を作る

More than 1 year has passed since last update.


web上にグラフを表示させる


今回初めてhtml, css, jsをちゃんと書いた

超入門者向け


グラフ描画をweb上でやりたい。

フリーのライセンスで使えそうなものとして、Chart.jsを使ってみた。

今回描画するのは散布図。


ファイル構成

[作業ファイル]

├── index.html

├── stylesheet.css

└── chartjs_exercise.js



html


index.html

<html>

<head>
<meta charset="utf-8">
<!-- Read chart.js 2.x. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!-- Read a css file. -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>chart.jsの練習</title>
</head>
<body>
<div id="chartContainer" style="height:70%; width:70%">
<!-- Show canvas here.-->
<canvas id="canvas"> </canvas>
</div>
<!-- Read a javascript file here below canvas. -->
<script src="chartjs_exercise.js"></script>
</body>
</html>



css


stylesheet.css

#canvas {

/*background: #000;*/
/*background: #FFF;*/
/*background: #C0C0C0;*/
background: #EEEEEE;

/*position: relative;*/
}




javascript


chartjs_exercise.js

window.chartColors = {

red: "#FF0000",
blue: "#00FF00"
};

var color = Chart.helpers.color;
var scatter_data = {
datasets:[{
label: "schatter dots",
borderColor: window.chartColors.red,
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
pointRadius: 10,

data: [{
x: 20.3,
y: 13.43
},{
x: 17.9,
y: 4.2
},{
x: 10.9,
y: 15.2
}]

}]
};

var ctx = document.getElementById('canvas').getContext('2d');
window.myScatter = Chart.Scatter(ctx, {
data: scatter_data,
option:{
title: {
display: true,
text: "Chart.js Scatter Chart"
},
}
});




サーバを立てる

php -S localhost:9000


  • もしくは、index.htmlをブラウザで直接読み込む



結果

image.png

See the Pen OZKbBa by Berry Clione (@berry_clione) on CodePen.