Chart.js에서 놀아 보았습니다.
꺾은 선 그래프와 막대 그래프도 자유자재!
chart.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'horizontalBar', //bar 棒グラフ、line 折れ線グラフ、horizontalBar 横の棒グラフ
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: '@NJ',
data: [80, 50, 60, 40, 30, 150],
backgroundColor: 'skyblue',
borderColor: 'blue',
borderWidth: 0,
fill: false,
pointStyle: 'rect'
},{
label: '@haruka',
data: [100, 100, 40, 50, 30, 100],
// borderColor: 'blue',
// borderWidth: 5,
backgroundColor: [
'hsla(90, 60%, 60%, 0.3)',
'hsla(180, 60%, 60%, 0.3)',
'hsla(270, 60%, 60%, 0.3)',
'hsla(360, 60%, 60%, 0.3)',
'hsla(0, 60%, 60%, 0.3)',
'hsla(80, 60%, 60%, 0.3)',
],
lineTension: 0,
pointStyle: 'triangle'
}]
},
// Configuration options go here
options: {
// scales: {
// yAxes: [{
// ticks: {
// // min: 0,
// // max:100
// suggestedMin: 0,
// suggestedMax: 100,
// stepSize: 10,
// callback: function(value, index, values){
// return 'JPY'+ value;
// }
// }
// }]
// },
//積み上げ棒グラフ
scales:{
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
},
title: {
display: true,
text: 'Annual Sales',
fontSize: 18,
position:'left'
},
animation: {
duration: 0
},
legend:{
// position: 'right'
// display: false
}
}
});
var myLineChart = new Chart(ctx, {
type: type,
data: data,
options: options
});
</script>
</body>
</html>
결과는 아래 그림과 같습니다. 처음에는 꺾은 선 그래프로 만들거나 테두리의 색을 바꾸거나
세로 막대 그래프 만들거나 했기 때문에 불필요한 코드도 많이 있습니다.
(//에서 댓글을 달고 있어)
꺾은선형 차트
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>my Chart</title>
</head>
<body>
<canvas id ="my_chart">
Canvas not supported...
</canvas>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
'use strict';
var type = 'line';
var data = {
labels: [2010, 2011, 2012, 2013],
datasets: [{
label: '@haruka',
data: [120, 130, 140, 150]
}, {
label: '@koji',
data: [180, 200, 150, 300]
}]
};
var options;
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
type: type,
data: data,
options: options
});
</script>
</body>
</html>
Reference
이 문제에 관하여(Chart.js에서 놀아 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/haruka1008/items/85bd002b47c9db5a51f2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
