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

== 实际案例 ==

=== 案例1：金融仪表盘 ===
股票行情图表需要实时响应：
* 桌面端显示完整K线图
* 移动端简化为分时图
* 横竖屏切换时自动调整指标密度

<mermaid>
flowchart TD
    A[检测屏幕尺寸] -->|>768px| B[显示完整图表]
    A -->|≤768px| C[简化移动视图]
    B --> D[显示10个技术指标]
    C --> E[显示3个核心指标]
</mermaid>

=== 案例2：实时监控系统 ===
服务器状态监控需求：
* 动态添加新数据点而不引起布局跳动
* 在数据突增时自动调整Y轴范围
* 多图表联动缩放

<syntaxhighlight lang="javascript">
// 动态数据示例
function addDataPoint(chart, newData) {
  chart.data.labels.push(new Date().toLocaleTimeString());
  chart.data.datasets.forEach(dataset => {
    dataset.data.push(newData.value);
    if(dataset.data.length > 50) {
      dataset.data.shift(); // 保持固定数据量
    }
  });
  chart.update('none'); // 无动画更新
}
</syntaxhighlight>