生物信息学 · katucharts.js/bio
曼哈顿图
type: 'manhattan'GWAS可视化——沿着染色体位置的点，每条染色体的颜色交替，以及全基因组显著性线。Canvas渲染超过约20k个点。
编辑右侧的JSON并按Run（或⌘/Ctrl + Enter）——数据、标题、类别和颜色全部实时更新。
实时
曼哈顿图
编辑 · JSON
数据格式
{ x: position, y: -log10pval, custom: { chromosome } }
数据结构
传入图表的 JSON——可直接放进你的 series。
data: [
{ x: 0, y: 7.5, custom: { chromosome: 'chr1' } },
{ x: 100, y: 5.2, custom: { chromosome: 'chr1' } },
{ x: 500, y: 8.1, custom: { chromosome: 'chr2' } }
]示例
KatuCharts.chart('container', {
series: [{ type: 'manhattan',
data: [{ x: 0, y: 7.5, custom: { chromosome: 'chr1' } }],
significanceLine: -5 }]
});类型特定选项
| 选项 | 描述 |
|---|---|
significanceThreshold / suggestiveLine | 阈值线（例如5e-8、1e-5）。 |
chromosomeColors | 按染色体交替颜色。 |
变体
提示阈值线
在全基因组显著性线下方添加第二条阈值线。
KatuCharts.chart('container', {
series: [{
type: 'manhattan',
data: snps,
significanceLine: -5,
suggestiveLine: -3
}]
});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: 'manhattan' }, series: [...] }).
- What data does the Manhattan plot expect?
- One point per SNP: { x: position, y: −log10(p), custom: { chromosome } }. Convert PLINK or regenie output to that shape first; the series does not parse those formats itself. Chromosomes alternate colours from chromosomeColors.
- How many SNPs can a Manhattan plot draw?
- Above canvasThreshold points (20,000 by default) the series switches from SVG to canvas rendering, so large GWAS results stay responsive.
- Where is the genome-wide significance line?
- Drawn at p = 5e-8 by default, with a suggestive line at p = 1e-5. Override them with significanceLine and suggestiveLine on the series; both take p-values.
- 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.