website/CHART_COMPONENTS_GUIDE.md

图表组件使用指南

本项目提供了一套高度通用和可复用的图表组件，可以轻松集成到任何 React + Markdown 博客系统中。

🎯 组件特点

✨ 高度通用

• 零依赖外部图表库：使用原生 SVG 和 React 实现
• 自包含组件：每个组件都是独立的，不依赖特定数据源
• 模块化设计：可以单独使用任何一个图表组件
• TypeScript 支持：完整的类型定义

🎨 统一设计风格

• 暗色主题：适配现代网站设计
• 响应式布局：自动适配移动端和桌面端
• 流畅动画：基于 Framer Motion 的专业动效
• 玻璃拟态效果：现代化的视觉风格

📊 可用图表组件

1. HealthMonitoringChart - 健康监测图表

import HealthMonitoringChart from './components/charts/HealthMonitoringChart';

// 直接使用
<HealthMonitoringChart />

特点：

• 24小时生命体征数据展示
• 多指标线图（心率、血压、睡眠、活动）
• 关键统计卡片
• 适用于：健康类、医疗类、监测类文章

2. CaseStudyComparisonChart - 案例对比图表

import CaseStudyComparisonChart from './components/charts/CaseStudyComparisonChart';

// 直接使用
<CaseStudyComparisonChart />

特点：

• 实施前后效果对比
• 交互式悬停效果
• 改善百分比展示
• 适用于：案例研究、效果分析、业务报告

3. MarketTrendChart - 市场趋势图表

import MarketTrendChart from './components/charts/MarketTrendChart';

// 直接使用
<MarketTrendChart />

特点：

• 时间序列数据展示
• 多维度数据对比（面积图+线图+柱图）
• 预测数据标记
• 适用于：市场分析、趋势预测、商业报告

4. AISystemArchitectureChart - 系统架构图

import AISystemArchitectureChart from './components/charts/AISystemArchitectureChart';

// 直接使用
<AISystemArchitectureChart />

特点：

• 交互式系统架构展示
• 点击展开组件详情
• 数据流向可视化
• 适用于：技术文档、系统介绍、架构说明

🚀 快速集成到任何博客

方法1：占位符方式（推荐）

1. 在 markdown 内容中添加占位符：

## AI系统架构

我们的系统采用五层架构设计：

{{CHART:system-architecture}}

如上图所示，系统从设备层到应用层形成完整的数据处理链路。

2. 在渲染组件中处理占位符：

// 在你的博客渲染组件中
const renderContent = (content) => {
  const parts = content.split(/(\{\{CHART:[^}]+\}\})/g);
  
  return parts.map((part, index) => {
    if (part.startsWith('{{CHART:')) {
      const chartType = part.match(/\{\{CHART:([^}]+)\}\}/)?.[1];
      return <ChartRenderer key={index} type={chartType} />;
    }
    return <ReactMarkdown key={index}>{part}</ReactMarkdown>;
  });
};

方法2：直接组件引用

import { HealthMonitoringChart, MarketTrendChart } from './components/charts';

const BlogPost = () => (
  <article>
    <h2>健康监测数据分析</h2>
    <p>以下是24小时监测数据：</p>
    
    <HealthMonitoringChart />
    
    <h2>市场发展趋势</h2>
    <p>行业增长预测如下：</p>
    
    <MarketTrendChart />
  </article>
);

方法3：MDX 集成

如果使用 MDX，可以直接在 markdown 中使用：

import { HealthMonitoringChart } from './components/charts';

# 健康监测报告

## 数据概览

以下是实时监测数据：

<HealthMonitoringChart />

数据显示用户的健康指标都在正常范围内。

🔧 自定义配置

扩展数据源

可以轻松修改组件以支持动态数据：

// 原始组件使用模拟数据
const HealthMonitoringChart = () => {
  const mockData = [...]; // 内置模拟数据
  // ...
};

// 扩展为支持外部数据
const HealthMonitoringChart = ({ data = mockData }) => {
  // 使用传入的数据或默认模拟数据
  // ...
};

// 使用方式
<HealthMonitoringChart data={yourRealData} />

主题定制

所有组件都使用 CSS 变量，可以轻松定制主题：

:root {
  --chart-primary: #06B6D4;      /* 主色调 */
  --chart-secondary: #10B981;    /* 辅助色 */
  --chart-background: #1F2937;   /* 背景色 */
  --chart-text: #F3F4F6;         /* 文字色 */
  --chart-border: #374151;       /* 边框色 */
}

尺寸调整

组件支持响应式设计，也可以手动调整：

<div style={{ height: '400px', width: '100%' }}>
  <HealthMonitoringChart />
</div>

📦 完整集成示例

新建博客文章集成图表

1. 创建新的博客文章数据：

// blogData.ts
{
  id: 'smart-healthcare-trends',
  title: '智慧医疗发展趋势分析',
  content: `
# 智慧医疗发展趋势分析

## 市场概况

当前智慧医疗市场正在快速发展：

{{CHART:market-trend}}

从数据可以看出，未来5年将保持高速增长。

## 技术架构

现代智慧医疗系统通常采用以下架构：

{{CHART:system-architecture}}

## 实施效果

某医院的智慧医疗系统实施效果：

{{CHART:case-study-comparison}}

## 健康监测数据

典型的患者监测数据如下：

{{CHART:health-monitoring}}
  `
}

2. 零配置使用：现有的 ChartRenderer 和 BlogDetail 组件会自动处理图表渲染。

🔄 扩展新图表类型

添加新的图表组件非常简单：

// 1. 创建新图表组件
const CustomChart = () => {
  return (
    <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-700/50 p-6">
      {/* 你的图表内容 */}
    </div>
  );
};

// 2. 在 ChartRenderer 中注册
const ChartRenderer = ({ type }) => {
  switch (type) {
    case 'health-monitoring': return <HealthMonitoringChart />;
    case 'custom-chart': return <CustomChart />;  // 新增
    default: return null;
  }
};

// 3. 在 markdown 中使用
// {{CHART:custom-chart}}

💡 最佳实践

1. 性能优化

• 使用 React.memo 避免不必要的重渲染
• 动画使用 transform 而非修改布局属性
• 大数据集考虑虚拟化处理

2. 可访问性

• 添加适当的 ARIA 标签
• 支持键盘导航
• 提供数据的文本描述

3. 响应式设计

• 使用相对单位而非固定像素
• 移动端优化触摸交互
• 考虑不同屏幕密度的显示效果

🎉 总结

这套图表组件系统具有以下优势：

✅ 零学习成本：markdown 占位符方式，写作者无需了解技术细节
✅ 高度灵活：支持多种集成方式，适应不同项目需求
✅ 专业外观：统一的设计语言，提升内容专业度
✅ 易于扩展：模块化架构，轻松添加新图表类型
✅ 性能优越：原生实现，无额外依赖负担

无论是技术博客、商业报告还是学术文章，都可以轻松集成这些图表组件，让数据展示更加生动和专业！