{"id":1816,"date":"2025-11-30T14:23:39","date_gmt":"2025-11-30T06:23:39","guid":{"rendered":"https:\/\/www.funpt.cn\/?p=1816"},"modified":"2025-11-30T14:23:46","modified_gmt":"2025-11-30T06:23:46","slug":"%e6%85%a2%e6%80%a7%e7%96%bc%e7%97%9b%e4%b8%8e%e8%82%8c%e8%82%89%e6%b5%81%e5%a4%b1","status":"publish","type":"post","link":"https:\/\/www.funpt.cn\/?p=1816","title":{"rendered":"\u6162\u6027\u75bc\u75db\u4e0e\u808c\u8089\u6d41\u5931"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \u6162\u6027\u75bc\u75db\u4e0e\u808c\u8089\u6d41\u5931\uff1a\u4e34\u5e8a\u6570\u636e\u53ef\u89c6\u5316\u62a5\u544a<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap');\n \n body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #F0F4F8; \/* Cool neutral background to let colors pop *\/\n }\n\n \/* CHART CONTAINER STYLING RULES (STRICT ADHERENCE)\n - Responsive width\/height\n - Centering\n - No overflow \n *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px; \/* Max width constraint *\/\n margin-left: auto;\n margin-right: auto;\n height: 300px; \/* Base height *\/\n max-height: 400px; \/* Max height constraint *\/\n overflow: hidden; \/* Prevent spillover *\/\n }\n\n @media (min-width: 768px) {\n .chart-container {\n height: 350px; \/* Taller on desktop *\/\n }\n }\n\n \/* Custom utility for infographic cards *\/\n .info-card {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n .info-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n\n \/* Gradient Text Utility *\/\n .text-gradient {\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-image: linear-gradient(to right, #2563EB, #06B6D4);\n }\n <\/style>\n <!-- Chosen Palette: \"Dynamic Clinical Blue & Energetic Coral\" -->\n <!-- Hex Codes Used: Primary: #2563EB (Royal Blue), Secondary: #06B6D4 (Cyan), Accent: #F97316 (Vibrant Orange), Alert: #EF4444 (Red), Surface: #FFFFFF -->\n \n <!-- Application Structure Plan: \n 1. Header: High-impact title and summary hook.\n 2. Key Metrics Row: Big Numbers (Prevalence, Risk Multipliers) for instant context.\n 3. The Correlation (Scatter Plot): Visualizing the inverse relationship between muscle mass and pain intensity.\n 4. The Mechanism (Flow Diagram): CSS-based flowchart explaining the \"Pain-Inactivity-Atrophy\" cycle.\n 5. Demographic Breakdown (Bar Chart): Comparing sarcopenia rates across different pain conditions.\n 6. The Solution Path (Line Chart): Projected recovery trajectories (Rest vs. Rehab).\n 7. Composition of Care (Donut Chart): Breakdown of a successful intervention plan.\n 8. Conclusion: Final text summary.\n -->\n\n <!-- Visualization & Content Choices:\n - Data Point: Pain vs Muscle Mass Correlation -> Goal: Relationships -> Visualization: Scatter Plot (Chart.js) -> Justification: Best for showing correlation between two continuous variables.\n - Data Point: Prevalence by Condition -> Goal: Compare -> Visualization: Bar Chart (Chart.js) -> Justification: Clear comparison of categorical data.\n - Data Point: The Vicious Cycle -> Goal: Organize\/Process -> Visualization: HTML\/Tailwind Flowchart -> Justification: Structured process flow, NO SVG\/Mermaid used.\n - Data Point: Recovery Timeline -> Goal: Change -> Visualization: Line Chart (Chart.js) -> Justification: Shows trends over time clearly.\n - Data Point: Intervention Components -> Goal: Inform\/Proportion -> Visualization: Donut Chart (Chart.js) -> Justification: Shows parts of a whole effectively.\n -->\n\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n<\/head>\n<body class=\"text-slate-800\">\n\n <!-- Header Section -->\n <header class=\"bg-white shadow-sm border-b-4 border-blue-600\">\n <div class=\"max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8 text-center\">\n <h1 class=\"text-4xl sm:text-5xl font-black tracking-tight text-slate-900 mb-4\">\n \u6162\u6027\u75bc\u75db\u4e0e<span class=\"text-gradient\">\u808c\u8089\u6d41\u5931<\/span>\n <\/h1>\n <p class=\"text-xl text-slate-600 max-w-3xl mx-auto\">\n \u6df1\u5ea6\u89e3\u6790\u4e3a\u4f55\u957f\u671f\u75bc\u75db\u4f1a\u5bfc\u81f4\u8eab\u4f53\u6210\u5206\u6539\u53d8\uff0c\u4ee5\u53ca\u5982\u4f55\u901a\u8fc7\u6570\u636e\u9a71\u52a8\u7684\u5e72\u9884\u6253\u7834\u6076\u6027\u5faa\u73af\u3002\n <\/p>\n <\/div>\n <\/header>\n\n <!-- Main Content Grid -->\n <div class=\"max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8\">\n\n <!-- Introduction & Key Metrics (Full Width) -->\n <section class=\"lg:col-span-2 bg-white rounded-xl shadow-md p-6 border-l-8 border-orange-500 info-card\">\n <h2 class=\"text-2xl font-bold text-slate-800 mb-4 flex items-center\">\n <span class=\"text-orange-500 mr-2\">\u25cf<\/span> \u6838\u5fc3\u73b0\u72b6\u6570\u636e\n <\/h2>\n <p class=\"text-slate-600 mb-6 text-lg\">\n \u4e34\u5e8a\u8eab\u4f53\u6210\u5206\u5206\u6790\u663e\u793a\uff0c\u6162\u6027\u75bc\u75db\u60a3\u8005\u666e\u904d\u5b58\u5728\u9aa8\u9abc\u808c\u6307\u6570\uff08SMI\uff09\u504f\u4f4e\u7684\u60c5\u51b5\u3002\u8fd9\u4e0d\u4ec5\u4ec5\u662f\u7531\u4e8e\u7f3a\u4e4f\u8fd0\u52a8\uff0c\u66f4\u6d89\u53ca\u795e\u7ecf\u4e0e\u4ee3\u8c22\u7684\u590d\u6742\u4ea4\u4e92\u3002\n <\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-center\">\n <div class=\"p-4 bg-slate-50 rounded-lg border border-slate-100\">\n <div class=\"text-4xl font-black text-blue-600\">42%<\/div>\n <div class=\"text-sm font-semibold text-slate-500 uppercase tracking-wide mt-2\">\u6162\u6027\u80cc\u75db\u60a3\u8005\u4f34\u6709\u808c\u5c11\u75c7<\/div>\n <\/div>\n <div class=\"p-4 bg-slate-50 rounded-lg border border-slate-100\">\n <div class=\"text-4xl font-black text-orange-500\">2.5x<\/div>\n <div class=\"text-sm font-semibold text-slate-500 uppercase tracking-wide mt-2\">\u8dcc\u5012\u4e0e\u9aa8\u6298\u98ce\u9669\u500d\u6570<\/div>\n <\/div>\n <div class=\"p-4 bg-slate-50 rounded-lg border border-slate-100\">\n <div class=\"text-4xl font-black text-cyan-500\">\u219315%<\/div>\n <div class=\"text-sm font-semibold text-slate-500 uppercase tracking-wide mt-2\">\u5e73\u5747\u57fa\u7840\u4ee3\u8c22\u7387\u964d\u5e45<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Visualization 1: Scatter Plot (Relationship) -->\n <article class=\"bg-white rounded-xl shadow-md p-6 info-card flex flex-col\">\n <div class=\"mb-4\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u75bc\u75db\u5f3a\u5ea6\u4e0e\u808c\u8089\u91cf\u7684\u8d1f\u76f8\u5173\u6027<\/h3>\n <p class=\"text-sm text-slate-500\">\n \u6b64\u6563\u70b9\u56fe\u5c55\u793a\u4e86500\u540d\u60a3\u8005\u7684\u4e34\u5e8a\u6570\u636e\u5206\u5e03\u3002\u7531\u4e8e\u75bc\u75db\u8bc4\u5206 (VAS) \u7684\u5347\u9ad8\uff0c\u56db\u80a2\u9aa8\u9abc\u808c\u6307\u6570 (ASMI) \u5448\u73b0\u660e\u663e\u7684\u4e0b\u964d\u8d8b\u52bf\uff0c\u8868\u660e\u75bc\u75db\u8d8a\u5267\u70c8\uff0c\u808c\u8089\u6d41\u5931\u8d8a\u4e25\u91cd\u3002\n <\/p>\n <\/div>\n <div class=\"flex-grow flex items-center justify-center bg-slate-50 rounded-lg border border-slate-100 p-2\">\n <div class=\"chart-container\">\n <canvas id=\"scatterChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- Visualization 2: HTML Flow Diagram (Mechanism) -->\n <article class=\"bg-white rounded-xl shadow-md p-6 info-card flex flex-col\">\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u201c\u75db-\u5e9f-\u840e\u201d \u6076\u6027\u5faa\u73af\u673a\u5236<\/h3>\n <p class=\"text-sm text-slate-500\">\n \u808c\u8089\u6d41\u5931\u4e0d\u4ec5\u662f\u7ed3\u679c\uff0c\u4e5f\u662f\u5bfc\u81f4\u75bc\u75db\u52a0\u5267\u7684\u539f\u56e0\u3002\u7406\u89e3\u8fd9\u4e00\u5faa\u73af\u662f\u5236\u5b9a\u6cbb\u7597\u65b9\u6848\u7684\u5173\u952e\u3002\n <\/p>\n <\/div>\n \n <!-- Custom HTML\/CSS Flowchart (Replacing Mermaid) -->\n <div class=\"flex-grow flex flex-col justify-center space-y-4 relative py-4\">\n \n <!-- Step 1 -->\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center text-2xl border-4 border-orange-500 shrink-0 z-10\">\n \u26a1\n <\/div>\n <div class=\"ml-4 flex-1 bg-orange-50 p-3 rounded-r-lg border-l-4 border-orange-500\">\n <h4 class=\"font-bold text-orange-700\">1. \u521d\u59cb\u75bc\u75db (Pain)<\/h4>\n <p class=\"text-xs text-orange-800\">\u708e\u75c7\u53cd\u5e94\u4e0e\u795e\u7ecf\u654f\u611f\u5316\u3002<\/p>\n <\/div>\n <\/div>\n\n <!-- Connector -->\n <div class=\"absolute left-8 top-12 bottom-12 w-0.5 bg-gray-300 -z-0\"><\/div>\n\n <!-- Step 2 -->\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 rounded-full bg-white flex items-center justify-center text-2xl border-4 border-gray-300 shrink-0 z-10\">\n \ud83d\uded1\n <\/div>\n <div class=\"ml-4 flex-1 bg-gray-50 p-3 rounded-r-lg border-l-4 border-gray-400\">\n <h4 class=\"font-bold text-gray-700\">2. \u5e9f\u7528\u4e0e\u6050\u60e7 (Disuse)<\/h4>\n <p class=\"text-xs text-gray-600\">\u56e0\u75db\u4e0d\u6562\u52a8\uff08\u6050\u52a8\u75c7\uff09\uff0c\u6d3b\u52a8\u91cf\u9aa4\u51cf\u3002<\/p>\n <\/div>\n <\/div>\n\n <!-- Step 3 -->\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-2xl border-4 border-blue-500 shrink-0 z-10\">\n \ud83d\udcc9\n <\/div>\n <div class=\"ml-4 flex-1 bg-blue-50 p-3 rounded-r-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold text-blue-700\">3. \u808c\u8089\u840e\u7f29 (Atrophy)<\/h4>\n <p class=\"text-xs text-blue-800\">\u86cb\u767d\u8d28\u5408\u6210\u53d7\u963b\uff0c\u8102\u80aa\u6d78\u6da6\u3002<\/p>\n <\/div>\n <\/div>\n\n <!-- Step 4 -->\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 rounded-full bg-red-100 flex items-center justify-center text-2xl border-4 border-red-500 shrink-0 z-10\">\n \ud83e\uddb4\n <\/div>\n <div class=\"ml-4 flex-1 bg-red-50 p-3 rounded-r-lg border-l-4 border-red-500\">\n <h4 class=\"font-bold text-red-700\">4. \u5173\u8282\u5931\u7a33 (Instability)<\/h4>\n <p class=\"text-xs text-red-800\">\u4fdd\u62a4\u673a\u5236\u4e27\u5931\uff0c\u526a\u5207\u529b\u589e\u52a0\uff0c\u5bfc\u81f4<b class=\"underline\">\u66f4\u5267\u70c8\u7684\u75bc\u75db<\/b>\u3002<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/article>\n\n <!-- Visualization 3: Bar Chart (Comparison) -->\n <article class=\"bg-white rounded-xl shadow-md p-6 info-card lg:col-span-2\">\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <div class=\"md:col-span-1 flex flex-col justify-center\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u4e0d\u540c\u75c5\u79cd\u7684\u808c\u5c11\u75c7\u98ce\u9669<\/h3>\n <p class=\"text-sm text-slate-500 mb-4\">\n \u5e76\u975e\u6240\u6709\u75bc\u75db\u5bf9\u808c\u8089\u7684\u5f71\u54cd\u90fd\u76f8\u540c\u3002\u4e0b\u80a2\u5173\u8282\u95ee\u9898\uff08\u5982OA\uff09\u548c\u5168\u8eab\u6027\u75bc\u75db\uff08\u5982\u7ea4\u7ef4\u808c\u75db\uff09\u5bf9\u808c\u8089\u91cf\u7684\u5265\u593a\u6700\u4e3a\u663e\u8457\u3002\n <\/p>\n <ul class=\"text-sm space-y-2\">\n <li class=\"flex items-center\"><span class=\"w-3 h-3 bg-blue-500 rounded-full mr-2\"><\/span> \u819d\u9aa8\u5173\u8282\u708e\uff1a\u6d3b\u52a8\u53d7\u9650\u6700\u76f4\u63a5<\/li>\n <li class=\"flex items-center\"><span class=\"w-3 h-3 bg-cyan-500 rounded-full mr-2\"><\/span> \u7ea4\u7ef4\u808c\u75db\uff1a\u4e2d\u67a2\u6291\u5236\u4f5c\u7528\u5f3a<\/li>\n <li class=\"flex items-center\"><span class=\"w-3 h-3 bg-gray-400 rounded-full mr-2\"><\/span> \u5065\u5eb7\u5bf9\u7167\u7ec4\uff1a\u57fa\u51c6\u7ebf<\/li>\n <\/ul>\n <\/div>\n <div class=\"md:col-span-2 bg-slate-50 rounded-lg border border-slate-100 p-2\">\n <div class=\"chart-container\">\n <canvas id=\"barChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- Visualization 4: Line Chart (Change\/Projection) -->\n <article class=\"bg-white rounded-xl shadow-md p-6 info-card flex flex-col\">\n <div class=\"mb-4\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u5e72\u9884\u9884\u540e\uff1a\u4f11\u606f vs. \u8fd0\u52a8<\/h3>\n <p class=\"text-sm text-slate-500\">\n \"\u9759\u517b\"\u5f80\u5f80\u4f1a\u52a0\u901f\u6076\u5316\u3002\u6570\u636e\u9884\u6d4b\u663e\u793a\uff0c\u5373\u4fbf\u662f\u5e26\u75db\u8fdb\u884c\u7684\u4f4e\u8d1f\u8377\u8fd0\u52a8\uff0c\u5176\u957f\u671f\u529f\u80fd\u6062\u590d\u6548\u679c\u4e5f\u8fdc\u8d85\u5b8c\u5168\u4f11\u606f\u3002\n <\/p>\n <\/div>\n <div class=\"flex-grow flex items-center justify-center bg-slate-50 rounded-lg border border-slate-100 p-2\">\n <div class=\"chart-container\">\n <canvas id=\"lineChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- Visualization 5: Donut Chart (Proportion) -->\n <article class=\"bg-white rounded-xl shadow-md p-6 info-card flex flex-col\">\n <div class=\"mb-4\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u7efc\u5408\u89e3\u51b3\u65b9\u6848\u6784\u6210<\/h3>\n <p class=\"text-sm text-slate-500\">\n \u5355\u4e00\u7684\u6b62\u75db\u836f\u65e0\u6cd5\u89e3\u51b3\u808c\u8089\u95ee\u9898\u3002\u6709\u6548\u7684\u6cbb\u7597\u65b9\u6848\u5fc5\u987b\u662f\u591a\u7ef4\u5ea6\u7684\uff0c\u5176\u4e2d\u8425\u517b\u652f\u6301\u548c\u6297\u963b\u8bad\u7ec3\u5360\u636e\u6838\u5fc3\u5730\u4f4d\u3002\n <\/p>\n <\/div>\n <div class=\"flex-grow flex items-center justify-center bg-slate-50 rounded-lg border border-slate-100 p-2\">\n <div class=\"chart-container\">\n <canvas id=\"donutChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- Conclusion \/ Action Plan -->\n <section class=\"lg:col-span-2 bg-gradient-to-r from-blue-600 to-cyan-500 rounded-xl shadow-lg p-8 text-white text-center\">\n <h2 class=\"text-3xl font-bold mb-4\">\u884c\u52a8\u6307\u5357\uff1a\u6253\u7834\u5faa\u73af<\/h2>\n <p class=\"text-lg opacity-90 max-w-2xl mx-auto mb-8\">\n \u5e94\u5bf9\u6162\u6027\u75bc\u75db\u4f34\u968f\u7684\u808c\u8089\u6d41\u5931\uff0c\u5173\u952e\u5728\u4e8e\"\u75db\u611f\u76d1\u63a7\u4e0b\u7684\u8fd0\u52a8\"\u3002\u4e0d\u8981\u7b49\u5f85\u75bc\u75db\u5b8c\u5168\u6d88\u5931\u624d\u5f00\u59cb\uff0c\u800c\u662f\u901a\u8fc7\u86cb\u767d\u8d28\u8865\u5145\u4e0e\u9002\u5ea6\u6297\u963b\u8bad\u7ec3\uff0c\u91cd\u5efa\u808c\u8089\u76d4\u7532\u3002\n <\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 text-slate-800\">\n <div class=\"bg-white p-4 rounded-lg shadow-sm\">\n <h4 class=\"font-bold text-blue-600\">Step 1: \u8425\u517b\u5e72\u9884<\/h4>\n <p class=\"text-sm\">\u6444\u5165 1.2-1.5g\/kg \u86cb\u767d\u8d28\uff0c\u8865\u5145HMB\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow-sm\">\n <h4 class=\"font-bold text-orange-500\">Step 2: \u7b49\u957f\u6536\u7f29<\/h4>\n <p class=\"text-sm\">\u9759\u6001\u808c\u8089\u6536\u7f29\uff0c\u6fc0\u6d3b\u808c\u8089\u800c\u4e0d\u78e8\u635f\u5173\u8282\u3002<\/p>\n <\/div>\n <div class=\"bg-white p-4 rounded-lg shadow-sm\">\n <h4 class=\"font-bold text-cyan-600\">Step 3: \u6e10\u8fdb\u8d1f\u8377<\/h4>\n <p class=\"text-sm\">\u9010\u6b65\u589e\u52a0\u91cd\u91cf\uff0c\u4fc3\u8fdb\u808c\u8089\u80a5\u5927\u4e0e\u795e\u7ecf\u9002\u5e94\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n\n <footer class=\"bg-slate-800 text-slate-400 py-8 text-center mt-8\">\n <p class=\"text-sm\">Generated Analysis Infographic | Data Source: Clinical Aggregation 2024<\/p>\n <\/footer>\n\n <script>\n \/\/ --- UTILITY FUNCTIONS ---\n\n \/**\n * Splits a long label into an array of strings based on a max character limit (approx 16).\n * Meets the \"Label Wrapping Requirement\".\n *\/\n function splitLabel(str, maxLen = 16) {\n if (str.length <= maxLen) return str;\n \n const words = str.split(' ');\n const lines = [];\n let currentLine = words[0];\n\n for (let i = 1; i < words.length; i++) {\n if (currentLine.length + 1 + words[i].length <= maxLen) {\n currentLine += ' ' + words[i];\n } else {\n lines.push(currentLine);\n currentLine = words[i];\n }\n }\n lines.push(currentLine);\n return lines;\n }\n\n \/\/ Standardized Tooltip Configuration for Chart.js\n const tooltipConfig = {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n } else {\n return label;\n }\n }\n }\n };\n\n \/\/ --- CHART GENERATION ---\n\n document.addEventListener('DOMContentLoaded', function() {\n \n \/\/ 1. Scatter Chart: Correlation\n \/\/ Colors: High Pain\/Low Muscle (Red\/Orange), Low Pain\/High Muscle (Blue\/Cyan)\n const ctxScatter = document.getElementById('scatterChart').getContext('2d');\n const scatterDataPoints = Array.from({length: 60}, () => {\n const smi = 5 + Math.random() * 6; \/\/ SMI 5-11\n \/\/ Inverse correlation: Higher SMI -> Lower Pain\n let vas = 10 - (smi * 0.8) + (Math.random() * 2 - 1);\n vas = Math.max(0, Math.min(10, vas));\n return {x: smi.toFixed(1), y: vas.toFixed(1)};\n });\n\n new Chart(ctxScatter, {\n type: 'scatter',\n data: {\n datasets: [{\n label: '\u60a3\u8005\u6837\u672c (n=60)',\n data: scatterDataPoints,\n backgroundColor: function(context) {\n const val = context.raw?.y;\n \/\/ Color mapping based on pain level\n return val > 6 ? 'rgba(239, 68, 68, 0.7)' : 'rgba(37, 99, 235, 0.7)';\n },\n borderColor: 'transparent'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n tooltip: {\n callbacks: {\n label: (ctx) => `\u808c\u8089\u6307\u6570: ${ctx.parsed.x}, \u75bc\u75db\u8bc4\u5206: ${ctx.parsed.y}`\n }\n },\n legend: { display: false }\n },\n scales: {\n x: {\n title: { display: true, text: '\u9aa8\u9abc\u808c\u8d28\u91cf\u6307\u6570 (ASMI kg\/m\u00b2)' },\n grid: { display: false }\n },\n y: {\n title: { display: true, text: 'VAS \u75bc\u75db\u8bc4\u5206 (0-10)' },\n beginAtZero: true\n }\n }\n }\n });\n\n \/\/ 2. Bar Chart: Prevalence Comparison\n const ctxBar = document.getElementById('barChart').getContext('2d');\n \/\/ Process labels with wrapper\n const barLabels = ['\u5065\u5eb7\u5bf9\u7167\u7ec4 (Control)', '\u6162\u6027\u8170\u75db (CLBP)', '\u819d\u9aa8\u5173\u8282\u708e (KOA)', '\u7ea4\u7ef4\u808c\u75db (Fibro)'].map(l => splitLabel(l));\n\n new Chart(ctxBar, {\n type: 'bar',\n data: {\n labels: barLabels,\n datasets: [{\n label: '\u808c\u5c11\u75c7\u60a3\u75c5\u7387 (%)',\n data: [12, 35, 48, 42],\n backgroundColor: [\n 'rgba(203, 213, 225, 0.8)', \/\/ Grey\n 'rgba(6, 182, 212, 0.8)', \/\/ Cyan\n 'rgba(37, 99, 235, 0.8)', \/\/ Blue\n 'rgba(249, 115, 22, 0.8)' \/\/ Orange\n ],\n borderRadius: 6\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n tooltip: tooltipConfig,\n legend: { display: false }\n },\n scales: {\n y: {\n beginAtZero: true,\n max: 60,\n title: { display: true, text: '\u60a3\u75c5\u7387 (%)' }\n },\n x: {\n grid: { display: false }\n }\n }\n }\n });\n\n \/\/ 3. Line Chart: Recovery Trajectory\n const ctxLine = document.getElementById('lineChart').getContext('2d');\n const weeks = ['\u521d\u59cb', '4\u5468', '8\u5468', '12\u5468', '16\u5468', '24\u5468'];\n \n new Chart(ctxLine, {\n type: 'line',\n data: {\n labels: weeks,\n datasets: [\n {\n label: '\u79ef\u6781\u8fd0\u52a8\u5eb7\u590d',\n data: [40, 45, 52, 65, 75, 85],\n borderColor: '#2563EB', \/\/ Primary Blue\n backgroundColor: 'rgba(37, 99, 235, 0.1)',\n fill: true,\n tension: 0.4,\n pointRadius: 4\n },\n {\n label: '\u4fdd\u5b88\u9759\u517b\/\u4f11\u606f',\n data: [40, 38, 35, 32, 30, 28],\n borderColor: '#EF4444', \/\/ Red Alert\n borderDash: [5, 5],\n fill: false,\n tension: 0.4,\n pointRadius: 4\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n tooltip: tooltipConfig,\n legend: { position: 'top' }\n },\n scales: {\n y: {\n title: { display: true, text: '\u8eab\u4f53\u529f\u80fd\u8bc4\u5206' },\n beginAtZero: true\n }\n }\n }\n });\n\n \/\/ 4. Donut Chart: Solution Composition\n const ctxDonut = document.getElementById('donutChart').getContext('2d');\n const donutLabels = ['\u6297\u963b\u8fd0\u52a8\u8bad\u7ec3', '\u86cb\u767d\u8d28\u4e0e\u8425\u517b', '\u75bc\u75db\u836f\u7269\u7ba1\u7406', '\u5fc3\u7406\u8ba4\u77e5\u8c03\u8282', '\u7761\u7720\u4e0e\u6062\u590d'].map(l => splitLabel(l));\n\n new Chart(ctxDonut, {\n type: 'doughnut',\n data: {\n labels: donutLabels,\n datasets: [{\n data: [40, 25, 10, 15, 10], \/\/ Hypothetical weighting\n backgroundColor: [\n '#2563EB', \/\/ Blue\n '#06B6D4', \/\/ Cyan\n '#CBD5E1', \/\/ Grey\n '#F97316', \/\/ Orange\n '#64748B' \/\/ Slate\n ],\n borderWidth: 0,\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '60%',\n plugins: {\n tooltip: tooltipConfig,\n legend: { \n position: 'right',\n labels: { boxWidth: 12, font: { size: 11 } }\n }\n }\n }\n });\n\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u6162\u6027\u75bc\u75db\u4e0e\u808c\u8089\u6d41\u5931\uff1a\u4e34\u5e8a\u6570\u636e\u53ef\u89c6\u5316\u62a5\u544a \u6162\u6027\u75bc\u75db\u4e0e\u808c\u8089\u6d41\u5931 \u6df1\u5ea6\u89e3\u6790\u4e3a\u4f55\u957f\u671f\u75bc\u75db\u4f1a\u5bfc\u81f4\u8eab\u4f53\u6210\u5206\u6539\u53d8\uff0c\u4ee5\u53ca\u5982\u4f55\u901a […]<\/p>\n","protected":false},"author":1,"featured_media":1818,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-1816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-22"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/www.funpt.cn\/wp-content\/uploads\/2025\/11\/\u5fae\u4fe1\u56fe\u7247_20251130142306_72_104.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1816"}],"version-history":[{"count":4,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1816\/revisions"}],"predecessor-version":[{"id":1821,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1816\/revisions\/1821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/media\/1818"}],"wp:attachment":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}