<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const DATA_COUNT = 12;
const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
labels.push(i.toString());
}
const datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
const data = {
labels: labels,
datasets: [
{
label: 'Cubic interpolation (monotone)',
data: datapoints,
borderColor:'rgb(137, 170, 219)',
fill: false,
cubicInterpolationMode: 'monotone',
tension: 0.4
}, {
label: 'Cubic interpolation',
data: datapoints,
borderColor: 'rgb(255, 99, 132)',
fill: false,
tension: 0.4
}, {
label: 'Linear interpolation (default)',
data: datapoints,
borderColor:'rgb(204, 255, 229)',
fill: false
}
]
};
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
},
interaction: {
intersect: false,
},
scales: {
x: {
display: true,
title: {
display: true
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
},
suggestedMin: -10,
suggestedMax: 200
}
}
},
});
</script>
</body>
</html>
공식문서(친절하지 않음) : https://www.chartjs.org/docs/latest/getting-started/
Getting Started | Chart.js
Getting Started Let's get started using Chart.js! First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness. Now that we have a canvas we can use, we need to include Chart.js in our page. Now, we c
www.chartjs.org
도움이 되시길 :)
'FRONT END > 자바스크립트' 카테고리의 다른 글
| AR.JS를 사용하여 AR 만들기 (0) | 2022.09.01 |
|---|