Kaktana React Lightweight Charts 使用指南
快速上手 Kaktana React 轻量级图表库
该库为 React 应用提供了一个轻量且高性能的金融图表解决方案，基于 lightweight-charts 构建，专为实时数据可视化设计。
项目结构概览
项目采用模块化组织方式，核心文件与目录如下：
kaktana-react-lightweight-charts/
├── .babelrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── dist/ # 编译输出目录
├── src/
│ ├── components/ # 可复用的图表组件
│ └── index.js # 公共导出入口
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js
- .babelrc：配置 Babel 编译规则，支持现代 JavaScript 语法。
- .gitignore 与 .npmignore：分别控制版本管理与包发布时忽略的文件。
- .prettierrc：统一代码风格，确保团队协作一致性。
- dist/：构建后的产物目录，包含可直接引入的 JS 文件。
- src/components/：存放核心图表组件，如
PriceChart、VolumeIndicator等。 - src/index.js：对外暴露主组件，是使用该库的唯一入口。
- webpack.config.js：定义打包流程，包括模块解析、加载器和输出路径。
主入口文件详解
启动应用的核心文件位于 src/index.js，其职责是渲染图表组件并绑定到页面节点。
import React from 'react';
import ReactDOM from 'react-dom';
import PriceChart from './components/PriceChart';
ReactDOM.render(
<PriceChart
data={sampleCandleData}
theme="dark"
width="100%"
height={400}
/>,
document.getElementById('app')
);
此代码将一个带有蜡烛图数据的图表实例挂载至 id="app" 的容器中，支持动态更新与响应式布局。
关键配置说明
Babel 配置（.babelrc）
启用对 ES2020+ 和 React 特性的支持：
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
Prettier 格式化设置（.prettierrc）
保持代码整洁一致：
{
"singleQuote": true,
"semi": false,
"trailingComma": "es5",
"printWidth": 100,
"tabWidth": 2
}
Webpack 打包配置（webpack.config.js）
实现模块打包与优化：
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'kaktana-chart.min.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { cacheDirectory: true }
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
支持 UMD 模块格式，兼容多种环境；启用缓存提升构建速度。
