文档
概览
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] }
]
});模块
核心包涵盖笛卡尔坐标、统计、分层和流程图表。专业化的图表作为选择性模块提供,导入时即注册其图表类型,例如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/react | React包装组件 |
为什么选择KatuCharts
- 统一API,64 种图表——通过改变单个
type字符串切换图表类型。 - 模块化——finance、bio 和 data-table 是在核心之上按需添加的独立导入。
- 为科学和金融而生——开箱即用的发表级生物信息学图表和金融时间序列。
- 实时流——通过WebSocket、SSE或轮询进行流数据,内置适配器。
- 无障碍——ARIA角色、键盘导航和屏幕阅读器描述。
- 导出——一次调用即可导出PNG, JPEG, SVG, PDF, CSV, XLS(PDF需要可选的jspdf包)。