让文章不止于文字：在 MDX 中加入图表

从文字到数据

有些变化，用一段话就能说清楚；有些趋势，画出来会更容易理解。MDX 让我们保留 Markdown 的写作体验，也能在合适的地方插入一个 React 组件。

下面是一组演示数据，展示一周的文章阅读量，不代表这个博客的实际访问情况。移动鼠标或点按图表，可以查看每一天的数值；也可以展开下方的数据表。

正文里只保留需要表达的内容

这张图表在文章里只需要这样写：

import chartData from "./chart-data.json"
<ArticleChart  title="这一周，文章被读了多少次？"  data={chartData}  xKey="day"  yKey="views"  xLabel="日期"  yLabel="阅读量"/>

图表的坐标轴、提示框和深色模式由组件统一处理。以后调整图表样式，不必逐篇修改文章。

把数据留在文章旁边

正文、封面、配图和图表数据保存在同一个文章目录里。复制整个目录，就能带走这篇文章的全部内容。

图片直接使用相对路径，例如 ![配图说明](./images/content-layout.svg)。封面也一样，在 frontmatter 中写 cover: "./cover.svg" 即可。

专属于这篇文章的数据放在同目录的 chart-data.json。文件内容是一个普通数组：

[  { "day": "周一", "views": 120 },  { "day": "周二", "views": 180 }]

写文章时，可以按下面的分工维护：

发布之前

• 确认标题和摘要能准确描述正文。
• 检查图表的数据来源、单位和说明。
• 在手机和深色模式下读一遍文章。
• 准备好以后，将 frontmatter 中的 draft 设为 false。

图表的作用是帮助读者理解文章。即使不操作图表，正文和数据表也应该能传达完整信息。