图表组件演示

这个页面展示了如何在 MDX 中使用图表组件。

线图示例

柱状图示例

面积图示例

饼图示例

多系列线图示例

使用说明

基本结构

每个图表都需要包装在 ChartContainer 中：

<ChartContainer config={chartConfig} className="h-[300px]">
  <LineChart data={data}>{/* 图表内容 */}</LineChart>
</ChartContainer>

配置对象

chartConfig 定义了数据系列的标签和颜色：

export const chartConfig = {
  value: {
    label: "数值标签",
    color: "hsl(var(--chart-1))",
  },
};

数据格式

数据应该是对象数组：

export const data = [
  { name: "标签1", value: 100 },
  { name: "标签2", value: 200 },
];

可用组件

现在你可以在 MDX 中使用以下组件：

ChartContainer: 图表容器
ChartTooltip, ChartTooltipContent: 工具提示
ChartLegend, ChartLegendContent: 图例
LineChart, Line: 线图
BarChart, Bar: 柱状图
AreaChart, Area: 面积图
PieChart, Pie, Cell: 饼图
XAxis, YAxis: 坐标轴
CartesianGrid: 网格线

所有这些组件都已经集成到 MDX 环境中，可以直接使用！