COMPONENT 73 · Data Display

图表

Chart

也叫GraphData Visualization统计图Charts

用柱、线、点或区域等视觉编码呈现数值关系。

Uses bars, lines, points, or areas to visualize quantitative relationships.

ANATOMY & USAGE

结构与使用建议

组成部分

标题
坐标或比例尺
数据标记与图例

适合使用

趋势、分布或比较比精确逐项读取更重要时。

不建议使用

数据量很小或精确值是唯一重点时。

键盘与无障碍

提供文字摘要和数据表；颜色不是唯一编码，标记、轴与图例具有足够对比度。

DESCRIBE IT TO AI

这样告诉编程助手

实现图表（Chart）：用柱、线、点或区域等视觉编码呈现数值关系。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<figure class="demo">
  <svg viewBox="0 0 240 120" role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">三个月访问量</title>
    <desc id="chart-desc">五月 40，六月 75，七月 60。</desc>
    <rect x="20" y="60" width="45" height="40">
    </rect>
    <rect x="95" y="25" width="45" height="75">
    </rect>
    <rect x="170" y="40" width="45" height="60">
    </rect>
  </svg>
  <figcaption>访问量（千次）</figcaption>
</figure>