菜鸟教程
教程 chartjs tutorial

什么是 Chart.js？

Chart.js 是一个开源的 JavaScript 图表库，基于 HTML5 Canvas，允许你轻松绘制折线图、柱状图、饼图等丰富的图表类型。它具有轻量、灵活、易扩展的特点，且支持动画和交互效果，非常适合用于数据可视化展示。

通过 Chart.js，你可以快速将数据转化为直观图形，提升用户体验和数据理解效率。该库拥有简洁的 API，支持响应式设计，可兼容多种浏览器和设备，适合在各种前端项目中集成使用。

Chart.js 通过简单配置即可完成复杂图表，内置多种默认样式，并允许自定义主题、坐标轴、图例、提示框等，满足不同场景需求。

Chart.js 官网：https://www.chartjs.org/

代码演示

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Chart.js 基础示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 600px;
margin: 2rem auto;
font-family: Arial, sans-serif;
}


canvas {
  background: #f5f5f5;
  border: 1px solid #ddd;
}



</style>
</head>


<body>
<h2>简单折线图示例</h2>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
(function () {
const ctx = document.getElementById(‘myChart’).getContext(‘2d’);
const myChart = new Chart(ctx, {
type: ‘line’,
data: {
labels: [‘一月’, ‘二月’, ‘三月’, ‘四月’, ‘五月’, ‘六月’, ‘七月’],
datasets: [{
label: ‘示例数据’,
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: ‘rgb(75, 192, 192)’,
tension: 0.1
}]
},
options: {
responsive: true,
plugins: {
legend: { display: true },
tooltip: { enabled: true }
}
}
});
})();


</script>
</body>


</html>

相关内容