文档

概览

KatuCharts是一个轻依赖的图表库。64 种图表类型、统一的声明式API,以及用于金融、生物信息学和数据表格的可选模块——v0.2.31。

安装

从npm安装核心包。每个附加模块是独立导入,所以你只加载你使用的模块。

npm install katucharts.js

# optional modules register themselves when imported
import KatuCharts from 'katucharts.js';
import 'katucharts.js/finance';
import 'katucharts.js/bio';
import { DataTable } from 'katucharts.js/datatable';
import { KatuChartsReact } from 'katucharts.js/react';

或从CDN直接引入UMD构建——无需打包工具:

<script src="https://unpkg.com/katucharts.js/dist/katucharts.umd.js"></script>
<div id="chart" style="width:100%;height:420px"></div>
<script>
  var KatuCharts = window.KatuCharts.default || window.KatuCharts.KatuCharts || window.KatuCharts;
  KatuCharts.chart('chart', {
    series: [{ type: 'line', data: [1, 3, 2, 5, 4] }]
  });
</script>

快速开始

每个图表都通过KatuCharts.chart(container, options)创建。容器可以是元素id或DOM节点。

import KatuCharts from 'katucharts.js';

KatuCharts.chart('my-chart', {
  chart: { type: 'areaspline' },
  title: { text: 'Weekly Traffic' },
  xAxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  series: [
    { name: 'Desktop', data: [450, 520, 480, 610, 580] },
    { name: 'Mobile',  data: [280, 350, 420, 510, 490] }
  ]
});
在寻找某种图表类型?在线图表库展示了所有64 种类型,图表类型文档记载了每种类型的数据结构。

模块

核心包涵盖笛卡尔坐标、统计、分层和流程图表。专业化的图表作为选择性模块提供,导入时即注册其图表类型,例如import 'katucharts.js/bio'。

导入包含
katucharts.js核心——折线图、面积图、柱状图、条形图、散点图、气泡图、饼图/环形图、仪表盘、极坐标、矩形树图、旭日图、漏斗图、热力图、瀑布图、箱线图、桑基图、网络图、依赖关系轮
katucharts.js/finance平均K线、空心K线、成交量、基线、Renko、Kagi等 + 19个技术指标
katucharts.js/bio火山图、曼哈顿图、Kaplan-Meier生存曲线、森林图、序列标志、聚类热力图、圆形图、PCoA、系统进化树
katucharts.js/datatable可排序、可筛选、可分页的交互式数据网格
katucharts.js/reactReact包装组件

为什么选择KatuCharts

  • 统一API,64 种图表——通过改变单个type字符串切换图表类型。
  • 模块化——finance、bio 和 data-table 是在核心之上按需添加的独立导入。
  • 为科学和金融而生——开箱即用的发表级生物信息学图表和金融时间序列。
  • 实时流——通过WebSocket、SSE或轮询进行流数据,内置适配器。
  • 无障碍——ARIA角色、键盘导航和屏幕阅读器描述。
  • 导出——一次调用即可导出PNG, JPEG, SVG, PDF, CSV, XLS(PDF需要可选的jspdf包)。