Medical Temperature Chart Component 一个专业的 React 医疗体温图表组件库，用于显示患者的体温、脉搏、心率等医疗数据的可视化图表。

✨ 特性 📊 完整的医疗数据可视化 - 体温、脉搏、心率、呼吸等数据展示 🔥 物理降温支持 - 支持显示物理降温前后的体温对比 💓 多数据源支持 - 脉搏、心率数据同时显示和对比 🫁 呼吸频率记录 - 完整的呼吸数据记录和展示 📋 医疗信息表格 - 血压、入水量、出水量等详细信息 🎨 高度可定制 - 支持自定义样式、配置和事件回调 📱 响应式设计 - 适配不同屏幕尺寸 🔧 TypeScript 支持 - 完整的类型定义和 IntelliSense 支持 🚀 零依赖 - 除 React 外无其他运行时依赖 📦 轻量级 - 体积小，性能优异 📦 安装 bash npm install medical-temperature-chart 或使用 yarn:

bash yarn add medical-temperature-chart 🚀 快速开始 jsx import React from 'react'; import { MedicalTemperatureChart } from 'medical-temperature-chart';

const patientData = { name: "张三", age: "32岁", gender: "男", inDate: "2023-08-01", diag: "感冒", dept: "内科", bed: "101", medicalNo: "202300123", outDate: "2023-08-07", dates: ["2023-08-01", "2023-08-02", "2023-08-03"], hospitalDays: [1, 2, 3], times: ["3", "7", "11", "15", "19", "23"], temperature: [ [38.7, 38.9, 38.5], [38.5, 38.5, null], [38.5, 38.4, 38.2], [38.6, 36.5, 38.8], [38.9, 38.8, 38.5], [null, 38.9, 38.8] ], pulse: [ [112, 110, 109], [85, 90, 83], [108, 85, 90], [null, 90, 83], [108, 85, 90], [100, null, null] ], heartRate: [ [115, 112, 111], [88, 93, 86], [110, 88, 93], [90, 93, 86], [110, 88, 93], [102, 95, 98] ], breath: [30, 30, null, null, 35, 35, 35, 35, 35, 35, null, null, 24, 25, 26, 27], bloodPressure: ["120/85", "121/84", ""], intake: ["1180ml", "", ""], output: ["500ml", "", ""], bowel: [1, 3, ""], urine: [6, 3, ""], height: ["167cm", "", ""], weight: ["85kg", "80kg", ""], allergy: ["无", "阿莫西林", ""] };

function App() { return ( <MedicalTemperatureChart patientData={patientData} onPrint={() => console.log('打印')} onExport={() => console.log('导出')} onSave={() => console.log('保存')} /> ); }

export default App; 📚 API 文档 MedicalTemperatureChartProps 属性 类型 必需 默认值 描述 patientData PatientData ✅ - 患者医疗数据 chartConfig Partial ❌ defaultConfig 图表配置选项 className string ❌ '' 自定义 CSS 类名 showButtons boolean ❌ true 是否显示操作按钮 onPrint () => void ❌ - 打印按钮点击回调 onExport () => void ❌ - 导出按钮点击回调 onSave () => void ❌ - 保存按钮点击回调 PatientData 接口 typescript interface PatientData { // 基本信息 name: string; // 患者姓名 age: string; // 年龄 gender: string; // 性别 inDate: string; // 入院日期 diag: string; // 诊断 dept: string; // 科室 bed: string; // 床位号 medicalNo: string; // 病案号 outDate: string; // 出院日期

// 时间数据 dates: string[]; // 日期数组 hospitalDays: number[]; // 住院天数 times: string[]; // 时间点 ["3", "7", "11", "15", "19", "23"]

// 医疗数据 (二维数组：[时间点][日期]) temperature: (number | string | null)[][]; // 体温数据 pulse: (number | null)[][]; // 脉搏数据 heartRate: (number | null)[][]; // 心率数据 breath: (number | null)[]; // 呼吸数据

// 其他医疗数据 (按日期排列) bloodPressure: string[]; // 血压 intake: string[]; // 入水量 output: string[]; // 出水量 bowel: (number | string)[]; // 大便次数 urine: (number | string)[]; // 小便次数 height: string[]; // 身高 weight: string[]; // 体重 allergy: string[]; // 过敏药物 } ChartConfig 接口 typescript interface ChartConfig { width: number; // 图表宽度 (默认: 1160) height: number; // 图表高度 (默认: 800) tempMin: number; // 温度最小值 (默认: 35) tempMax: number; // 温度最大值 (默认: 41) pulseMin: number; // 脉搏最小值 (默认: 20) pulseMax: number; // 脉搏最大值 (默认: 160) gridCols: number; // 网格列数 (默认: 42) gridRows: number; // 网格行数 (默认: 30) chartStartY: number; // 图表起始Y坐标 (默认: 90) chartHeight: number; // 图表区域高度 (默认: 500) } 🔥 高级用法 自定义图表配置 jsx const customChartConfig = { width: 1200, height: 900, gridCols: 48, // 8天 * 6个时间点 chartHeight: 600 };

物理降温数据格式 体温数据支持物理降温格式，使用 | 分隔原始温度和降温后温度：

jsx const temperatureWithCooling = [ [38.7, "39.1|37.0", 38.5], // 39.1°C 物理降温后 37.0°C [38.5, 38.5, null], // ... 更多数据 ]; 事件处理 jsx const handlePrint = () => { // 自定义打印逻辑 window.print(); };

const handleExport = () => { // 导出为 PDF 或图片 // 可以使用 html2canvas 或 jsPDF };

const handleSave = () => { // 保存数据到服务器 fetch('/api/save-chart', { method: 'POST', body: JSON.stringify(patientData) }); };

🎨 自定义样式 jsx // 使用自定义 CSS 类 css /* 自定义样式 */ .my-custom-chart { border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

.my-custom-chart .chart-header h1 { color: #0066cc; font-size: 24px; }

.my-custom-chart .patient-info { background-color: #f5f5f5; padding: 12px; border-radius: 4px; } 📊 数据格式说明 温度数据格式 普通体温: 38.5 (数字) 物理降温: "39.1|37.0" (字符串，原始温度|降温后温度) 缺失数据: null 二维数组数据结构 javascript // temperature[时间点索引][日期索引] const temperature = [ [38.7, 38.9, 38.5], // 3点的体温数据，对应3天 [38.5, 38.5, null], // 7点的体温数据 [38.5, 38.4, 38.2], // 11点的体温数据 // ... 继续其他时间点 ]; 🛠️ 开发 本地开发 bash

克隆项目

git clone https://github.com/your-username/medical-temperature-chart.git

安装依赖

npm install

开发模式

npm run dev

类型检查

npm run type-check

构建

npm run build 构建命令 bash

清理构建目录

npm run clean

类型检查

npm run type-check

构建库

npm run build

预览构建结果

npm run preview 🔧 技术栈 React - UI 框架 TypeScript - 类型安全 SVG - 高质量图表渲染 Rollup - 库打包工具 Vite - 开发服务器 📋 浏览器支持 Chrome >= 60 Firefox >= 60 Safari >= 12 Edge >= 79 🤝 贡献 欢迎贡献代码！请查看 贡献指南。

贡献步骤 Fork 项目 创建特性分支 (git checkout -b feature/AmazingFeature) 提交更改 (git commit -m 'Add some AmazingFeature') 推送到分支 (git push origin feature/AmazingFeature) 开启 Pull Request 📄 许可证 本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

📞 支持 如果您在使用过程中遇到问题：

查看 Issues 创建新的 Issue 发送邮件到 [email protected] 🎯 路线图 添加更多图表类型 支持数据导出功能 添加打印优化 国际化支持 移动端优化 主题自定义 💡 示例项目 查看 示例项目 了解更多使用方法。

如果这个项目对您有帮助，请给个 ⭐️ 支持一下！

Made with ❤️ by Your Name