参考

模块

选择性包，导入时即注册各自的图表类型。仅导入你需要的——核心包保持精小。

金融

金融时间序列图表加上19个技术指标。

import KatuCharts from 'katucharts.js';
import 'katucharts.js/finance'; // registers the finance chart types

KatuCharts.chart('c', {
  series: [{
    type: 'candlestick',
    data: [[172,178,170,176], [176,182,174,180], /* [o,h,l,c] */]
  }]
});

图表类型

candlestick、ohlc、heikinashi、hollowcandlestick、volume、vbp、arearange、baseline、flags、renko、kagi、pointandfigure、linebreak。

技术指标（19个）

SMA, EMA, WMA, DEMA, TEMA, RSI, Stochastic, MACD, CCI, ROC, Momentum, Bollinger Bands, ATR, VWAP, OBV, VBP, Ichimoku Cloud, ADX, PSAR。每个从OHLC计算并返回覆盖series。

import { EMA, RSI, BollingerBands } from 'katucharts.js/finance';

// ohlc: [{ x, open, high, low, close, volume? }, ...]
const ema = EMA.calculate(ohlc, { period: 21 }).values;
chart.addSeries({ type: 'line', name: 'EMA 21', data: ema });

// or declare it in the options and let the chart compute it
KatuCharts.chart('c', {
  series: [
    { id: 'px', type: 'candlestick', data: ohlc },
    { type: 'sma', linkedTo: 'px', params: { period: 50 } }
  ]
});

生物信息学

发表级基因组学和统计——科学包。

import KatuCharts from 'katucharts.js';
import 'katucharts.js/bio'; // registers the bioinformatics chart types

KatuCharts.chart('c', {
  series: [{
    type: 'volcano',
    data: [{ x: 2.5, y: 10.3, name: 'BRCA1' }, { x: -1.8, y: 4.2, name: 'TP53' }],
    foldChangeThreshold: 1,
    pValueThreshold: 0.01
  }]
});

volcano——差异表达，按阈值自动分类。
manhattan——按染色体的GWAS与显著性线（>20k个点时使用canvas）。
kaplanmeier——带置信带和删失标记的生存曲线。
forestplot——元分析效应大小与汇总菱形。
sequencelogo、clusteredheatmap、pcoa、phylotree。
circos及变体——多轨圆形基因组图（直方图、连接、热力图轨道）。

数据表

交互式数据网格与任何图表配对——排序、筛选、分页、选择和导出。

import { DataTable } from 'katucharts.js/datatable';

const table = new DataTable('#grid', {
  data: rows,
  columns: [
    { accessorKey: 'name', header: 'Name' },
    {
      accessorKey: 'value',
      header: 'Value',
      cell: ({ row }) => row.getValue('value').toFixed(2),
    },
  ],
  pagination: { pageSize: 25 },
  filtering: { enabled: true },
  exporting: { enabled: true, formats: ['csv', 'json'] },
});

完整 DataTable 参考 →

React

一个薄包装器，从props驱动图表并在卸载时清理。

import KatuCharts from 'katucharts.js';
import { KatuChartsReact } from 'katucharts.js/react';

export default function Chart() {
  return (
    <KatuChartsReact
      katuCharts={KatuCharts}
      options={{ series: [{ type: 'line', data: [1, 3, 2, 5, 4] }] }}
      containerProps={{ style: { height: 400 } }}
    />
  );
}

此处列出的每种类型都在图表库中实时渲染，数据形状在图表类型。