How do I create a 森林图 chart in JavaScript?

Install with `npm install katucharts.js`, import the module with `import 'katucharts.js/bio';`, then call KatuCharts.chart(container, { chart: { type: 'forestplot' }, series: [...] }).

Can KatuCharts pool the studies in a forest plot?

It draws a pooled estimate but does not compute it. Calculate the pooled effect with your meta-analysis tool, add it as a row with custom.isSummary: true, and it is drawn as a diamond (colour set by summaryDiamondColor). nullEffectValue sets the reference line: 1 for ratios, 0 for differences.

Why does my 森林图 chart render as a line chart?

The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type " ", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.

Why do I get "Cannot read properties of null (reading 'appendChild')"?

The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.

Why is the chart rendering with zero height?

The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

生物信息学 · katucharts.js/bio

森林图

type: 'forestplot'

荟萃分析森林图，显示研究间的效应量和置信区间；正方形大小编码研究权重。

编辑右侧的JSON并按Run（或⌘/Ctrl + Enter）——数据、标题、类别和颜色全部实时更新。

实时

森林图

编辑 · JSON

{
  "chart": {
    "type": "forestplot"
  },
  "title": {
    "text": "荟萃分析"
  },
  "series": [
    {
      "name": "Studies",
      "nullEffectValue": 1,
      "data": [
        {
          "x": 1.2,
          "y": 1,
          "name": "Study A",
          "custom": {
            "ciLower": 0.9,
            "ciUpper": 1.6,
            "weight": 18
          }
        },
        {
          "x": 0.85,
          "y": 2,
          "name": "Study B",
          "custom": {
            "ciLower": 0.6,
            "ciUpper": 1.2,
            "weight": 24
          }
        },
        {
          "x": 1.45,
          "y": 3,
          "name": "Study C",
          "custom": {
            "ciLower": 1.05,
            "ciUpper": 2,
            "weight": 15
          }
        },
        {
          "x": 1.1,
          "y": 4,
          "name": "Study D",
          "custom": {
            "ciLower": 0.8,
            "ciUpper": 1.5,
            "weight": 20
          }
        },
        {
          "x": 1.15,
          "y": 5,
          "name": "Pooled",
          "custom": {
            "ciLower": 0.98,
            "ciUpper": 1.35,
            "isSummary": true
          }
        }
      ]
    }
  ]
}

数据格式

{ x: effectSize, y: rowIndex, name, custom: { ciLower、ciUpper、weight } }

数据结构

传入图表的 JSON——可直接放进你的 series。

data: [
  { x: 1.2, y: 1, name: 'Study A', custom: { ciLower: 0.9, ciUpper: 1.6, weight: 18 } },
  { x: 1.5, y: 2, name: 'Study B', custom: { ciLower: 1.1, ciUpper: 2.0, weight: 22 } },
  { x: 1.0, y: 3, name: 'Study C', custom: { ciLower: 0.8, ciUpper: 1.4, weight: 16 } }
]

示例

KatuCharts.chart('container', {
  series: [{ type: 'forestplot',
    data: [{ x: 1.2, y: 1, name: 'Study A', custom: { ciLower: 0.9, ciUpper: 1.6, weight: 18 } }] }]
});

类型特定选项

选项	描述
`nullEffectValue`	零线（HR/OR为1，MD为0）。
`markerSizeByWeight`	按研究权重缩放正方形大小。

Common errors

Why does my 森林图 chart render as a line chart?: The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?: The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?: The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

FAQ

How do I create a 森林图 chart in JavaScript?: Install with `npm install katucharts.js`, import the module with `import 'katucharts.js/bio';`, then call KatuCharts.chart(container, { chart: { type: 'forestplot' }, series: [...] }).
Can KatuCharts pool the studies in a forest plot?: It draws a pooled estimate but does not compute it. Calculate the pooled effect with your meta-analysis tool, add it as a row with custom.isSummary: true, and it is drawn as a diamond (colour set by summaryDiamondColor). nullEffectValue sets the reference line: 1 for ratios, 0 for differences.
Why does my 森林图 chart render as a line chart?: The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?: The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?: The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

通用选项（color、visible、marker、dataLabels、animation、events、zones…）适用于每个类型——请参阅配置→series。在图库中查看其渲染。