醫院檢驗報告單細胞圖實現：基於 Highcharts (HCharts) 的散點圖

需求分析

醫院檢驗報告中的細胞圖通常表現為散點分佈，展示細胞大小、顆粒度等參數的二維關係，類似流式細胞儀散點圖。

技術選型

使用 JavaScript 圖表庫 Highcharts (國內鏡像 HCharts) 即可純前端實現，無需 Java 後端參與繪圖邏輯。

實現示例

參考官方散點圖 Demo：Highcharts 散點圖示例

核心配置

Highcharts.chart('container', {
    chart: { type: 'scatter', zoomType: 'xy' },
    title: { text: '細胞散點圖' },
    xAxis: { title: { text: '前向散射光 (FSC)' } },
    yAxis: { title: { text: '側向散射光 (SSC)' } },
    series: [{
        name: '淋巴細胞',
        data: [[100, 200], [120, 210], ...], // 真實數據點
        marker: { radius: 3 }
    }, {
        name: '單核細胞',
        data: [[300, 400], [320, 410], ...],
        marker: { radius: 3 }
    }]
});

數據來源

後端（Java/Python 等）從檢驗儀器接口獲取原始 FCS 數據，解析後以 JSON 形式傳遞給前端，前端直接渲染。或由前端直接請求數據接口。

優勢

• 純 JS 渲染，跨平台，無需服務端圖片生成。
• 支持縮放、懸浮提示、導出圖片等交互。
• 配置靈活，可疊加門控區域、統計信息等。