使用 Chart.js 绘制折线图 - 详细教程和示例代码 - 常规

<!DOCTYPE html>
<html>
<head>
<title>折线图示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
max-width: 800px;
max-height: 400px;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="lineChart"></canvas>
<script>
var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3, 8],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>