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"
},
}
});
サーバを立てる
- 以下のコマンドでサーバを立て、http://localhost:9000にアクセスする
php -S localhost:9000
- もしくは、
index.htmlをブラウザで直接読み込む
結果
See the Pen OZKbBa by Berry Clione (@berry_clione) on CodePen.