编辑“︁JavaScript响应式图表”︁（章节）

=== 基础实现示例 ===
使用Chart.js创建响应式折线图：

<syntaxhighlight lang="javascript">
// HTML容器
<div style="width:80%; margin:0 auto;">
  <canvas id="responsiveChart"></canvas>
</div>

// JavaScript代码
const ctx = document.getElementById('responsiveChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Sales 2023',
      data: [65, 59, 80, 81, 56],
      borderColor: 'rgb(75, 192, 192)'
    }]
  },
  options: {
    responsive: true,  // 启用响应式
    maintainAspectRatio: false  // 不保持固定宽高比
  }
});

// 窗口大小变化时手动触发resize(某些库需要)
window.addEventListener('resize', () => {
  chart.resize();
});
</syntaxhighlight>

输出效果：
* 当浏览器窗口缩小时，图表会自动缩小并保持数据可读性
* 横轴标签可能变为斜向显示或减少显示密度