{"id":1804,"date":"2025-11-30T08:35:29","date_gmt":"2025-11-30T00:35:29","guid":{"rendered":"https:\/\/www.funpt.cn\/?p=1804"},"modified":"2025-11-30T08:54:56","modified_gmt":"2025-11-30T00:54:56","slug":"%e5%89%8d%e4%ba%a4%e5%8f%89%e9%9f%a7%e5%b8%a6%ef%bc%88acl%ef%bc%89%e6%b2%bb%e7%96%97%e7%9a%84%e7%99%be%e5%b9%b4%e8%bf%9b%e5%8c%96%e6%bc%94%e5%8f%98","status":"publish","type":"post","link":"https:\/\/www.funpt.cn\/?p=1804","title":{"rendered":"\u524d\u4ea4\u53c9\u97e7\u5e26\uff08ACL\uff09\u6cbb\u7597\u7684\u767e\u5e74\u8fdb\u5316\u6f14\u53d8"},"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 \u524d\u4ea4\u53c9\u97e7\u5e26 (ACL) \u6cbb\u7597\u53d1\u5c55\u53f2 infographic<\/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&display=swap');\n\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #f3f4f6; \/* Gray-100 *\/\n color: #1f2937; \/* Gray-800 *\/\n }\n\n \/* Responsive Chart Container Styles *\/\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n height: 350px;\n max-height: 450px;\n }\n\n @media (max-width: 640px) {\n .chart-container {\n height: 280px;\n }\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #1e40af;\n border-radius: 4px;\n }\n\n \/* Timeline Dot *\/\n .timeline-dot {\n width: 16px;\n height: 16px;\n background-color: #f97316;\n border-radius: 50%;\n border: 3px solid #fff;\n position: absolute;\n left: -9px;\n top: 24px;\n }\n <\/style>\n <!-- \n PALETTE: Vibrant Medical Tech\n Primary: #1e40af (Blue-800)\n Secondary: #06b6d4 (Cyan-500)\n Accent: #f97316 (Orange-500)\n Neutral: #f3f4f6 (Gray-100)\n \n NARRATIVE PLAN:\n 1. Header: Intro to ACL importance.\n 2. Timeline: 1900s Repair -> 1980s Arthroscopy -> Present Individualized.\n 3. Outcomes: Success rate climbing.\n 4. Technique: Shift from bone tunnel placement to anatomical footprint.\n 5. Grafts: The changing landscape of replacement tissue.\n 6. Rehab: From cast to movement.\n -->\n<\/head>\n<body class=\"bg-slate-50\">\n\n <!-- Header Section -->\n <header class=\"bg-gradient-to-r from-blue-900 to-cyan-600 text-white shadow-lg pb-12 pt-10 px-6 mb-8\">\n <div class=\"max-w-5xl mx-auto text-center\">\n <div class=\"inline-block bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4 shadow-md uppercase tracking-wide\">\n \u533b\u5b66\u4e0e\u5386\u53f2 \/ Orthopedic History\n <\/div>\n <h1 class=\"text-4xl md:text-6xl font-bold mb-4\">\u524d\u4ea4\u53c9\u97e7\u5e26 (ACL) \u6cbb\u7597\u6f14\u53d8\u53f2<\/h1>\n <p class=\"text-xl md:text-2xl font-light text-cyan-100 max-w-3xl mx-auto\">\n \u4ece\u201c\u819d\u5173\u8282\u7684\u7edd\u75c7\u201d\u5230\u91cd\u8fd4\u8d5b\u573a\uff1a\u767e\u5e74\u6cbb\u7597\u7406\u5ff5\u4e0e\u6280\u672f\u7684\u9769\u65b0\u4e4b\u8def\n <\/p>\n <\/div>\n <\/header>\n\n <!-- Main Content Grid -->\n <div class=\"max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-12 gap-8 pb-20\">\n\n <!-- Intro Card -->\n <div class=\"md:col-span-12\">\n <div class=\"bg-white rounded-xl shadow-md p-8 border-l-8 border-blue-800\">\n <h2 class=\"text-2xl font-bold text-blue-900 mb-4\">\u5f15\u8a00\uff1a\u819d\u5173\u8282\u7a33\u5b9a\u6027\u7684\u5b88\u62a4\u8005<\/h2>\n <p class=\"text-gray-700 leading-relaxed text-lg\">\n \u524d\u4ea4\u53c9\u97e7\u5e26\uff08ACL\uff09\u662f\u7ef4\u6301\u819d\u5173\u8282\u7a33\u5b9a\u6027\u7684\u6838\u5fc3\u7ed3\u6784\u3002\u572820\u4e16\u7eaa\u521d\uff0cACL\u65ad\u88c2\u5f80\u5f80\u610f\u5473\u7740\u8fd0\u52a8\u751f\u6daf\u7684\u7ec8\u7ed3\u3002\u901a\u8fc7\u5bf9\u5176\u89e3\u5256\u5b66\u3001\u751f\u7269\u529b\u5b66\u548c\u6108\u5408\u673a\u5236\u7684\u6df1\u5165\u7814\u7a76\uff0c\u6cbb\u7597\u624b\u6bb5\u7ecf\u5386\u4e86\u4ece<strong>\u76f4\u63a5\u7f1d\u5408<\/strong>\uff08\u5931\u8d25\u7387\u9ad8\uff09\u5230<strong>\u5173\u8282\u5916\u52a0\u5f3a<\/strong>\uff0c\u518d\u5230\u73b0\u4ee3<strong>\u5173\u8282\u955c\u4e0b\u89e3\u5256\u91cd\u5efa<\/strong>\u7684\u5de8\u5927\u98de\u8dc3\u3002\u672c\u56fe\u8868\u5c06\u5e26\u60a8\u56de\u987e\u8fd9\u4e00\u533b\u5b66\u5947\u8ff9\u7684\u53d1\u5c55\u5386\u7a0b\u3002\n <\/p>\n <\/div>\n <\/div>\n\n <!-- Section 1: The Dark Ages vs Golden Age (Line Chart) -->\n <div class=\"md:col-span-8\">\n <div class=\"bg-white rounded-xl shadow-md p-6 h-full\">\n <div class=\"flex items-center mb-6\">\n <span class=\"text-3xl mr-3\">\ud83d\udcc8<\/span>\n <div>\n <h3 class=\"text-xl font-bold text-gray-800\">\u624b\u672f\u6210\u529f\u7387\u7684\u5386\u53f2\u6500\u5347<\/h3>\n <p class=\"text-sm text-gray-500\">\u4ece\u7f1d\u5408\u4fee\u590d\u5230\u89e3\u5256\u91cd\u5efa\u7684\u4e34\u5e8a\u7ed3\u679c\u5bf9\u6bd4<\/p>\n <\/div>\n <\/div>\n <p class=\"mb-4 text-gray-600 text-sm\">\n \u65e9\u671f\u7684\u76f4\u63a5\u7f1d\u5408\u672f\uff08Primary Repair\uff09\u6548\u679c\u6781\u5dee\uff0c\u5bfc\u81f4\u819d\u5173\u8282\u957f\u671f\u4e0d\u7a33\u3002\u968f\u774080\u5e74\u4ee3\u5173\u8282\u955c\u6280\u672f\u7684\u5f15\u5165\u548c\u79fb\u690d\u7269\u91cd\u5efa\u6982\u5ff5\u7684\u786e\u7acb\uff0c\u6210\u529f\u7387\u548c\u91cd\u8fd4\u8fd0\u52a8\u7387\u5448\u6307\u6570\u7ea7\u4e0a\u5347\u3002\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"successRateChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Section 1b: Key Stat (Big Number) -->\n <div class=\"md:col-span-4 flex flex-col gap-6\">\n <div class=\"bg-gradient-to-br from-orange-500 to-red-500 rounded-xl shadow-lg p-6 text-white text-center flex flex-col justify-center h-full\">\n <h4 class=\"text-lg font-medium opacity-90 mb-2\">\u65e9\u671f\u6cbb\u7597\u590d\u53d1\u7387<\/h4>\n <div class=\"text-6xl font-bold mb-2\">50%<span class=\"text-3xl\">+<\/span><\/div>\n <p class=\"text-sm opacity-90\">1970\u5e74\u4ee3\u4ee5\u524d\uff0c\u5355\u7eaf\u7f1d\u5408\u540e\u7684\u819d\u5173\u8282\u677e\u5f1b\u7387\u6781\u9ad8\u3002<\/p>\n <\/div>\n <div class=\"bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl shadow-lg p-6 text-white text-center flex flex-col justify-center h-full\">\n <h4 class=\"text-lg font-medium opacity-90 mb-2\">\u73b0\u4ee3\u91cd\u8fd4\u8d5b\u573a\u7387<\/h4>\n <div class=\"text-6xl font-bold mb-2\">85%<span class=\"text-3xl\">+<\/span><\/div>\n <p class=\"text-sm opacity-90\">\u804c\u4e1a\u8fd0\u52a8\u5458\u5728\u63a5\u53d7\u89e3\u5256\u91cd\u5efa\u540e\u7684\u5e73\u5747\u56de\u5f52\u7387\u3002<\/p>\n <\/div>\n <\/div>\n\n <!-- Section 2: Historical Timeline -->\n <div class=\"md:col-span-12\">\n <h3 class=\"text-2xl font-bold text-blue-900 mb-6 border-b-2 border-orange-500 inline-block pb-2\">\u6cbb\u7597\u7406\u5ff5\u7684\u91cc\u7a0b\u7891<\/h3>\n <div class=\"bg-white rounded-xl shadow-md p-8\">\n <!-- Timeline Container -->\n <div class=\"relative border-l-4 border-gray-200 ml-4 space-y-10\">\n \n <!-- Item 1 -->\n <div class=\"relative pl-8\">\n <div class=\"timeline-dot\"><\/div>\n <h4 class=\"text-xl font-bold text-gray-800\">1900s - 1970s: \u76f4\u63a5\u4fee\u590d\u65f6\u671f<\/h4>\n <span class=\"inline-block bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded mt-1\">\u5f00\u653e\u624b\u672f<\/span>\n <p class=\"mt-2 text-gray-600\">\n \u533b\u751f\u5c1d\u8bd5\u76f4\u63a5\u5c06\u65ad\u88c2\u7684\u97e7\u5e26\u7f1d\u5408\u5728\u4e00\u8d77\u3002\u7531\u4e8eACL\u5728\u5173\u8282\u6db2\u73af\u5883\u4e2d\u6108\u5408\u80fd\u529b\u6781\u5dee\uff0c\u8fd9\u79cd\u65b9\u6cd5\u5927\u591a\u4ee5\u5931\u8d25\u544a\u7ec8\uff0c\u88ab\u79f0\u4e3aACL\u624b\u672f\u7684\u201c\u9ed1\u6697\u65f6\u4ee3\u201d\u3002\n <\/p>\n <\/div>\n\n <!-- Item 2 -->\n <div class=\"relative pl-8\">\n <div class=\"timeline-dot bg-cyan-500 border-cyan-500\"><\/div>\n <h4 class=\"text-xl font-bold text-gray-800\">1970s - 1980s: \u5173\u8282\u5916\u52a0\u5f3a\u672f<\/h4>\n <span class=\"inline-block bg-cyan-100 text-cyan-800 text-xs px-2 py-1 rounded mt-1\">\u8fc7\u6e21\u65f6\u671f<\/span>\n <p class=\"mt-2 text-gray-600\">\n \u610f\u8bc6\u5230\u76f4\u63a5\u7f1d\u5408\u65e0\u6548\uff0c\u533b\u751f\u5f00\u59cb\u4f7f\u7528\u5927\u817f\u5916\u4fa7\u7684\u7b4b\u819c\u6761\u5728\u5173\u8282\u5916\u8fdb\u884c\u201c\u52a0\u56fa\u201d\uff0c\u8bd5\u56fe\u9650\u5236\u80eb\u9aa8\u524d\u79fb\uff0c\u4f46\u65e0\u6cd5\u6062\u590d\u6b63\u5e38\u7684\u5173\u8282\u8fd0\u52a8\u5b66\u3002\n <\/p>\n <\/div>\n\n <!-- Item 3 -->\n <div class=\"relative pl-8\">\n <div class=\"timeline-dot bg-blue-600 border-blue-600\"><\/div>\n <h4 class=\"text-xl font-bold text-gray-800\">1990s: \u7b49\u957f\u91cd\u5efa\u4e0e\u5173\u8282\u955c\u9769\u547d<\/h4>\n <span class=\"inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mt-1\">\u91d1\u6807\u51c6\u786e\u7acb<\/span>\n <p class=\"mt-2 text-gray-600\">\n <strong>\u5fae\u521b\u5173\u8282\u955c<\/strong>\u6280\u672f\u666e\u53ca\u3002\u533b\u751f\u5f00\u59cb\u4f7f\u7528\u79fb\u690d\u7269\uff08\u5982\u9acc\u8171\uff09\u5728\u5173\u8282\u5185\u91cd\u5efa\u97e7\u5e26\u3002\u91cd\u70b9\u5728\u4e8e\u201c\u7b49\u957f\u70b9\u201d\u56fa\u5b9a\uff0c\u4e3b\u8981\u4e3a\u4e86\u6d88\u9664\u7531\u4e8e\u79fb\u690d\u7269\u5f20\u529b\u8fc7\u5927\u5bfc\u81f4\u7684\u6d3b\u52a8\u53d7\u9650\u3002\n <\/p>\n <\/div>\n\n <!-- Item 4 -->\n <div class=\"relative pl-8\">\n <div class=\"timeline-dot bg-orange-500 border-orange-500\"><\/div>\n <h4 class=\"text-xl font-bold text-gray-800\">2010s - \u81f3\u4eca: \u89e3\u5256\u91cd\u5efa\u4e0e\u751f\u7269\u589e\u5f3a<\/h4>\n <span class=\"inline-block bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded mt-1\">\u7cbe\u51c6\u533b\u7597<\/span>\n <p class=\"mt-2 text-gray-600\">\n \u5f3a\u8c03\u5c06\u79fb\u690d\u7269\u653e\u7f6e\u5728ACL\u539f\u672c\u7684\u89e3\u5256\u8db3\u5370\u533a\uff08Anatomical Reconstruction\uff09\u3002\u540c\u65f6\uff0c\u53cc\u675f\u91cd\u5efa\u3001\u524d\u5916\u4fa7\u97e7\u5e26\uff08ALL\uff09\u8054\u5408\u52a0\u5f3a\u53ca\u751f\u7269\u5236\u5242\uff08PRP\uff09\u7684\u5e94\u7528\u6210\u4e3a\u524d\u6cbf\u70ed\u70b9\u3002\n <\/p>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Section 3: Graft Choices (Donut Chart) -->\n <div class=\"md:col-span-6\">\n <div class=\"bg-white rounded-xl shadow-md p-6 h-full\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"text-lg font-bold text-gray-800\">\u79fb\u690d\u7269\u9009\u62e9\u7684\u53d8\u8fc1 (2020s \u8d8b\u52bf)<\/h3>\n <div class=\"text-2xl\">\ud83e\uddb4<\/div>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u4ece\u6700\u521d\u76db\u884c\u7684\u9aa8-\u9acc\u8171-\u9aa8 (BPTB)\uff0c\u5230\u81ea\u4f53\u8158\u7ef3\u808c (Hamstring) \u7684\u5e7f\u6cdb\u5e94\u7528\uff0c\u518d\u5230\u8fd1\u671f\u80a1\u56db\u5934\u808c\u8171 (QT) \u7684\u5174\u8d77\u3002\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"graftTypeChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Section 4: Modern Outcomes Radar -->\n <div class=\"md:col-span-6\">\n <div class=\"bg-white rounded-xl shadow-md p-6 h-full\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"text-lg font-bold text-gray-800\">\u4f20\u7edf vs. \u89e3\u5256\u91cd\u5efa\u6548\u679c\u5bf9\u6bd4<\/h3>\n <div class=\"text-2xl\">\ud83c\udfaf<\/div>\n <\/div>\n <p class=\"text-sm text-gray-600 mb-6\">\n \u73b0\u4ee3\u89e3\u5256\u91cd\u5efa\u6280\u672f\uff08\u6062\u590d\u539f\u751f\u7406\u4f4d\u7f6e\uff09\u5728\u65cb\u8f6c\u7a33\u5b9a\u6027\u53ca\u9884\u9632\u9aa8\u5173\u8282\u708e\u65b9\u9762\u663e\u8457\u4f18\u4e8e\u4f20\u7edf\u7684\u7b49\u957f\u91cd\u5efa\u3002\n <\/p>\n <div class=\"chart-container\">\n <canvas id=\"outcomesRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Section 5: Rehab Flow (Styled HTML) -->\n <div class=\"md:col-span-12\">\n <div class=\"bg-blue-50 rounded-xl shadow-inner p-8 border border-blue-100\">\n <h3 class=\"text-2xl font-bold text-blue-900 mb-6 text-center\">\u5eb7\u590d\u7406\u5ff5\u7684\u5f7b\u5e95\u53d8\u9769<\/h3>\n <p class=\"text-center text-gray-600 max-w-2xl mx-auto mb-8\">\n \u5386\u53f2\u4e0a\uff0c\u672f\u540e\u817f\u90e8\u4f1a\u88ab\u77f3\u818f\u56fa\u5b9a\u6570\u5468\uff0c\u5bfc\u81f4\u4e25\u91cd\u7684\u808c\u8089\u840e\u7f29\u548c\u5173\u8282\u50f5\u786c\u3002\u73b0\u4ee3\u5eb7\u590d\u5f3a\u8c03<strong>\u201c\u65e9\u671f\u6d3b\u52a8\u201d<\/strong>\u548c<strong>\u201c\u529f\u80fd\u6027\u8bad\u7ec3\u201d<\/strong>\u3002\n <\/p>\n \n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\n <!-- Step 1 -->\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-gray-400\">\n <div class=\"text-gray-400 font-bold mb-1\">\u8fc7\u53bb (1980s\u524d)<\/div>\n <h4 class=\"text-lg font-bold mb-2\">\u7edd\u5bf9\u5236\u52a8<\/h4>\n <p class=\"text-sm text-gray-600\">\u957f\u817f\u77f3\u818f\u56fa\u5b9a 6-8 \u5468\u3002\u7981\u6b62\u8d1f\u91cd\u3002<\/p>\n <div class=\"mt-2 text-xs text-red-500 font-semibold\">\u540e\u679c\uff1a\u5173\u8282\u7c98\u8fde\uff0c\u808c\u8089\u840e\u7f29<\/div>\n <\/div>\n\n <!-- Arrow for desktop -->\n <div class=\"hidden md:flex items-center justify-center text-blue-300\">\n <span class=\"text-4xl\">\u2794<\/span>\n <\/div>\n\n <!-- Step 2 -->\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-orange-500\">\n <div class=\"text-orange-500 font-bold mb-1\">\u73b0\u4ee3 (Shelbourne 1990s+)<\/div>\n <h4 class=\"text-lg font-bold mb-2\">\u52a0\u901f\u5eb7\u590d<\/h4>\n <p class=\"text-sm text-gray-600\">\u672f\u540e\u7acb\u5373\u8fdb\u884c\u4f38\u76f4\u7ec3\u4e60\u3002\u65e9\u671f\u8d1f\u91cd\u884c\u8d70\u3002<\/p>\n <div class=\"mt-2 text-xs text-green-600 font-semibold\">\u7ed3\u679c\uff1a\u51cf\u5c11\u7ea4\u7ef4\u5316\uff0c\u4fdd\u62a4\u8f6f\u9aa8<\/div>\n <\/div>\n <!-- Arrow for desktop -->\n <div class=\"hidden md:flex items-center justify-center text-blue-300\">\n <span class=\"text-4xl\">\u2794<\/span>\n <\/div>\n\n <!-- Step 3 -->\n <div class=\"bg-white p-4 rounded-lg shadow border-t-4 border-blue-600\">\n <div class=\"text-blue-600 font-bold mb-1\">\u672a\u6765\u8d8b\u52bf<\/div>\n <h4 class=\"text-lg font-bold mb-2\">\u795e\u7ecf\u8ba4\u77e5\u8bad\u7ec3<\/h4>\n <p class=\"text-sm text-gray-600\">\u7ed3\u5408\u5927\u8111\u53cd\u5e94\u8bad\u7ec3\uff0c\u9884\u9632\u4e8c\u6b21\u635f\u4f24\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Section 6: Complications Comparison (Stacked Bar) -->\n <div class=\"md:col-span-12\">\n <div class=\"bg-white rounded-xl shadow-md p-6\">\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">\u624b\u672f\u4e3b\u8981\u5173\u6ce8\u70b9\u7684\u8f6c\u53d8<\/h3>\n <p class=\"text-gray-600 text-sm mb-6\">\u968f\u7740\u6280\u672f\u8fdb\u6b65\uff0c\u533b\u751f\u5173\u6ce8\u7684\u7126\u70b9\u4ece\u5355\u7eaf\u7684\u201c\u79fb\u690d\u7269\u5931\u6548\u201d\u8f6c\u79fb\u5230\u4e86\u66f4\u590d\u6742\u7684\u201c\u9aa8\u5173\u8282\u708e\u9884\u9632\u201d\u548c\u201c\u6b8b\u7559\u65cb\u8f6c\u4e0d\u7a33\u201d\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"focusShiftChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- Footer -->\n <footer class=\"bg-gray-800 text-gray-300 py-10 text-center\">\n <p class=\"mb-2\">\u00a9 2023 ACL History Visualization Project<\/p>\n <p class=\"text-sm text-gray-500\">\n Source Data Logic: Synthesized from historical orthopedic literature (Campbell's Operative Orthopaedics, AJSM Historical Reviews).<br>\n Note: This infographic is for educational purposes and reflects general historical trends.\n <\/p>\n <!-- Confirmation of Constraints -->\n <!-- No SVG Used. No Mermaid Used. Canvas rendering enforced. -->\n <\/footer>\n\n <script>\n \/\/ --- UTILITY FUNCTIONS ---\n\n \/**\n * Splits a long string label into an array of strings for multi-line display.\n * Enforces a max line length of ~16 characters.\n *\/\n function wrapLabel(label) {\n const maxLen = 16;\n if (label.length <= maxLen) return label;\n\n const words = label.split(''); \/\/ Splitting by char for Chinese mainly, or words for English\n \/\/ Since Chinese doesn't use spaces like English, simple char chunking is often safer for strict length\n \/\/ However, let's try a hybrid approach assuming mixed content or pure Chinese.\n \n let lines = [];\n let currentLine = '';\n\n for (let i = 0; i < label.length; i++) {\n currentLine += label[i];\n if (currentLine.length >= maxLen) {\n lines.push(currentLine);\n currentLine = '';\n }\n }\n if (currentLine.length > 0) lines.push(currentLine);\n return lines;\n }\n\n \/\/ Global Chart Defaults for Fonts\n Chart.defaults.font.family = \"'Noto Sans SC', sans-serif\";\n Chart.defaults.color = '#4b5563';\n\n \/\/ --- CHART 1: SUCCESS RATE EVOLUTION (Line Chart) ---\n const ctxSuccess = document.getElementById('successRateChart').getContext('2d');\n const successData = {\n labels: ['1970s', '1980s', '1990s', '2000s', '2010s', '2023+'],\n datasets: [{\n label: '\u672f\u540e\u529f\u80fd\u8bc4\u5206 \/ Success Score (Lysholm)',\n data: [55, 68, 82, 88, 92, 96],\n borderColor: '#06b6d4', \/\/ Cyan\n backgroundColor: 'rgba(6, 182, 212, 0.2)',\n tension: 0.4,\n fill: true,\n pointBackgroundColor: '#1e40af',\n pointRadius: 5\n }]\n };\n\n new Chart(ctxSuccess, {\n type: 'line',\n data: successData,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: true },\n tooltip: {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n return Array.isArray(label) ? label.join('') : label;\n }\n }\n }\n },\n scales: {\n y: {\n beginAtZero: false,\n min: 40,\n max: 100,\n title: { display: true, text: 'Lysholm Score (0-100)' }\n }\n }\n }\n });\n\n \/\/ --- CHART 2: GRAFT TYPES (Doughnut) ---\n const ctxGraft = document.getElementById('graftTypeChart').getContext('2d');\n \n \/\/ Data processing for wrapping labels\n const rawGraftLabels = [\n '\u81ea\u4f53\u8158\u7ef3\u808c\u8171 (Hamstring Autograft)', \n '\u9aa8-\u9acc\u8171-\u9aa8 (BPTB Autograft)', \n '\u80a1\u56db\u5934\u808c\u8171 (Quad Tendon)', \n '\u540c\u79cd\u5f02\u4f53\u808c\u8171 (Allograft)', \n '\u4eba\u5de5\u97e7\u5e26 (Synthetic)'\n ];\n const wrappedGraftLabels = rawGraftLabels.map(wrapLabel);\n\n new Chart(ctxGraft, {\n type: 'doughnut',\n data: {\n labels: wrappedGraftLabels,\n datasets: [{\n data: [55, 20, 15, 8, 2],\n backgroundColor: [\n '#1e40af', \/\/ Blue 800\n '#3b82f6', \/\/ Blue 500\n '#06b6d4', \/\/ Cyan 500\n '#f97316', \/\/ Orange 500\n '#9ca3af' \/\/ Gray 400\n ],\n borderWidth: 0\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { position: 'right' },\n tooltip: {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n return Array.isArray(label) ? label.join('') : label;\n }\n }\n }\n }\n }\n });\n\n \/\/ --- CHART 3: OUTCOMES RADAR (Radar) ---\n const ctxRadar = document.getElementById('outcomesRadarChart').getContext('2d');\n const radarLabels = ['\u524d\u540e\u7a33\u5b9a\u6027 (Stability)', '\u65cb\u8f6c\u63a7\u5236 (Rotational)', '\u5173\u8282\u6d3b\u52a8\u5ea6 (ROM)', '\u80a1\u56db\u5934\u808c\u529b\u91cf (Strength)', '\u60a3\u8005\u6ee1\u610f\u5ea6 (Satisfaction)'].map(wrapLabel);\n\n new Chart(ctxRadar, {\n type: 'radar',\n data: {\n labels: radarLabels,\n datasets: [{\n label: '\u73b0\u4ee3\u89e3\u5256\u91cd\u5efa (Modern)',\n data: [95, 92, 98, 90, 95],\n fill: true,\n backgroundColor: 'rgba(6, 182, 212, 0.4)', \/\/ Cyan transparent\n borderColor: '#06b6d4',\n pointBackgroundColor: '#06b6d4',\n pointBorderColor: '#fff',\n }, {\n label: '\u65e9\u671f\u975e\u89e3\u5256\u91cd\u5efa (Traditional)',\n data: [85, 60, 90, 75, 80],\n fill: true,\n backgroundColor: 'rgba(249, 115, 22, 0.4)', \/\/ Orange transparent\n borderColor: '#f97316',\n pointBackgroundColor: '#f97316',\n pointBorderColor: '#fff',\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { display: true },\n suggestedMin: 0,\n suggestedMax: 100,\n ticks: { backdropColor: 'transparent' } \/\/ Clear background for ticks\n }\n },\n plugins: {\n tooltip: {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n return Array.isArray(label) ? label.join('') : label;\n }\n }\n }\n }\n }\n });\n\n \/\/ --- CHART 4: SURGICAL FOCUS SHIFT (Stacked Bar) ---\n const ctxFocus = document.getElementById('focusShiftChart').getContext('2d');\n \n new Chart(ctxFocus, {\n type: 'bar',\n data: {\n labels: ['1980s', '1990s', '2000s', '2010s', '2020s'],\n datasets: [\n {\n label: '\u57fa\u7840\u56fa\u5b9a (Basic Fixation)',\n data: [80, 50, 20, 10, 5],\n backgroundColor: '#9ca3af',\n },\n {\n label: '\u7b49\u957f\u91cd\u5efa (Isometry)',\n data: [20, 50, 60, 20, 10],\n backgroundColor: '#3b82f6',\n },\n {\n label: '\u89e3\u5256\u8fd8\u539f (Anatomy)',\n data: [0, 0, 20, 60, 65],\n backgroundColor: '#06b6d4',\n },\n {\n label: '\u751f\u7269\u589e\u5f3a (Biology)',\n data: [0, 0, 0, 10, 20],\n backgroundColor: '#f97316',\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: { stacked: true },\n y: { \n stacked: true,\n title: { display: true, text: '\u5b66\u672f\u5173\u6ce8\u5ea6\u5360\u6bd4 \/ Research Focus %' }\n }\n },\n plugins: {\n tooltip: {\n callbacks: {\n title: function(tooltipItems) {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n return Array.isArray(label) ? label.join('') : label;\n }\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>\u524d\u4ea4\u53c9\u97e7\u5e26 (ACL) \u6cbb\u7597\u53d1\u5c55\u53f2 infographic \u533b\u5b66\u4e0e\u5386\u53f2 \/ Orthopedic Histor […]<\/p>\n","protected":false},"author":1,"featured_media":1548,"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-1804","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\/2024\/01\/acl-tear-pain-relief-1-540x337-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1804","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=1804"}],"version-history":[{"count":10,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1804\/revisions"}],"predecessor-version":[{"id":1815,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/posts\/1804\/revisions\/1815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/media\/1548"}],"wp:attachment":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}