掌握Chart.js：打造全屏自适应的动态图表攻略

引言

Chart.js 是一个基于 HTML5 Canvas 的图表库，它简单易用，功能强大，能够帮助开发者快速创建各种类型的图表。本文将详细介绍如何使用 Chart.js 打造全屏自适应的动态图表，让您的图表在不同设备上都能完美展示。

准备工作

在开始之前，请确保您已经：

引入了 Chart.js 库。
准备了用于图表的数据。

以下是 Chart.js 的基本引入方式：

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

创建全屏自适应的图表

1. 设置容器

首先，我们需要为图表创建一个容器。这个容器应该具有 100% 的宽度和高度，以便实现全屏效果。

<div id="chart-container" style="width: 100%; height: 100vh;"></div>

2. 初始化图表

接下来，我们使用 Chart 函数初始化图表。这里以柱状图为例：

const chart = new Chart(document.getElementById('chart-container'), { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Sales', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(0, 123, 255, 0.5)', borderColor: 'rgba(0, 123, 255, 1)', borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false } });

3. 全屏自适应

为了实现全屏自适应，我们需要监听窗口大小变化事件，并更新图表的尺寸。

window.addEventListener('resize', () => { chart.resize(); });

4. 动态更新数据

在实际应用中，我们可能需要动态更新图表数据。以下是一个示例：

function updateData() { const newData = [90, 70, 60, 80, 70, 60, 50]; chart.data.datasets[0].data = newData; chart.update(); } // 每隔5秒更新数据 setInterval(updateData, 5000);