Chart.js로 산점도 만들기
웹에 그래프 표시
이번에 처음 html, css, js를 제대로 썼다.
초입문자용
그래프 그리기를 웹상에서 하고 싶다.
무료 라이센스로 사용할 수있는 것처럼 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.jswindow.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"
},
}
});
서버를 세우다
<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>
#canvas {
/*background: #000;*/
/*background: #FFF;*/
/*background: #C0C0C0;*/
background: #EEEEEE;
/*position: relative;*/
}
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를 브라우저에서 직접로드 결과
See the Pen OZKbBa by Berry Clione ( @berry_clione ) on CodePen .
Reference
이 문제에 관하여(Chart.js로 산점도 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/berry-clione/items/e46fd122cd3f75cedd5e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
