首页 > 资讯 > 科技资讯 >

📊 html5图表插件Chart.js用法 📊

发布时间:2025-03-14 17:33:18来源:

Chart.js 是一款轻量级且功能强大的 HTML5 图表插件,适合开发者快速创建各种炫酷的图表!无论是柱状图、折线图还是饼图,它都能轻松搞定。✨

首先,你需要引入 Chart.js 的核心文件。可以通过 CDN 快速加载:

```html

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

```

接下来,准备一个 `` 元素作为图表容器:

```html

```

然后,通过 JavaScript 初始化图表。例如绘制一个简单的折线图:

```javascript

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {

type: 'line', // 指定图表类型

data: {

labels: ['一月', '二月', '三月', '四月'],

datasets: [{

label: '销售数据',

data: [65, 59, 80, 81],

borderColor: 'rgba(75, 192, 192, 1)',

borderWidth: 2

}]

},

options: {

responsive: true

}

});

```

最后,保存并刷新页面,你会发现一个漂亮的折线图跃然纸上!🎉

Chart.js 不仅易于上手,还支持多种自定义选项,快来试试吧!💡

免责声明:本答案或内容为用户上传,不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。 如遇侵权请及时联系本站删除。