mirror of
https://github.com/klinecharts/KLineChart.git
synced 2024-11-25 16:22:43 +08:00
118 lines
4.5 KiB
Markdown
118 lines
4.5 KiB
Markdown
<div align="center">
|
|
<a href="https://klinecharts.com">
|
|
<img src="https://klinecharts.com/images/logo.svg?hash=89987fs7789" height="150"/>
|
|
</a>
|
|
</div>
|
|
<h1 align="center">KLineChart</h1>
|
|
|
|
<div align="center">
|
|
English | <a href="https://github.com/liihuu/KLineChart/blob/main/README.zh-CN.md">简体中文</a>
|
|
</div>
|
|
<br/>
|
|
|
|
<p align="center">💹📈 Lightweight k-line chart built with html5 canvas.</p>
|
|
<div align="center">
|
|
|
|
[](https://github.com/liihuu/KLineChart/actions/workflows/build.yml)
|
|
[](https://www.npmjs.com/package/klinecharts)
|
|
[](https://bundlephobia.com/result?p=klinecharts@latest)
|
|
[](https://www.npmjs.com/package/klinecharts)
|
|
[](types/index.d.ts)
|
|
[](LICENSE)
|
|
[](https://vitepress.dev/)
|
|
|
|
</div>
|
|
|
|
<div align="center">
|
|
|
|
[](https://github.com/liihuu/KLineChart/issues)
|
|
[](https://github.com/liihuu/KLineChart/discussions)
|
|
[](https://t.me/klinecharts)
|
|
[](https://klinecharts.com/en-US/guide/feedback.html)
|
|
<!-- [](https://discord.gg/7YjHYgvvvZ) -->
|
|
<!-- [](https://twitter.com/klinecharts) -->
|
|
|
|
|
|
</div>
|
|
|
|
<img style="margin-bottom:6px" src="https://cdn.nlark.com/yuque/0/2023/png/8403091/1684399506365-assets/web-upload/044fe897-168c-4fbb-a485-87a8ef61c04a.png" />
|
|
|
|
|
|
## ✨ Features
|
|
- 📦 **Out of the box:** Simple and fast integration, basically zero cost to get started.
|
|
- 🚀 **Lightweight and smooth:** Zero dependencies, only 40k under gzip compression.
|
|
- 💪 **Powerful functions:** Built-in multiple indicators and line drawing models.
|
|
- 🎨 **Highly scalable:** With rich style configuration and API, the function can be extended as you like.
|
|
- 📱 **Mobile:** Support mobile, one chart, handle multiple terminals.
|
|
- 🛡 **Typescript development:** Provide complete type definition files.
|
|
|
|
## ⚡ Performance
|
|
Similar to chart libraries for performance comparison.
|
|
+ **Test Scenario:** 50000 pieces of data, 5 pane indicators, average 10 runs
|
|
+ **Device:** macOS Ventura, Apple M2 Pro, 16G
|
|
+ **Browser:** Chrome 114.0.5735.106
|
|
+ **Framework:** React@18.2.0
|
|
|
|
Comparison of time consumption from initialization to full rendering:
|
|
|
|
| **klinecharts@9.4.0** | **night-vision@0.3.2** | **hqchart@1.1.12147** |
|
|
| :---: | :---: | :---: |
|
|
| 37ms | 36ms | 241ms |
|
|
|
|
|
|
## 📦 Install
|
|
### Using npm
|
|
```bash
|
|
npm install klinecharts --save
|
|
```
|
|
|
|
### Using yarn
|
|
```bash
|
|
yarn add klinecharts
|
|
```
|
|
|
|
### CDNs
|
|
#### [unpkg](https://unpkg.com)
|
|
```html
|
|
<script type="text/javascript" src="https://unpkg.com/klinecharts/dist/klinecharts.min.js"></script>
|
|
```
|
|
|
|
#### [jsDelivr](https://cdn.jsdelivr.net)
|
|
```html
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/klinecharts/dist/klinecharts.min.js"></script>
|
|
```
|
|
|
|
## 📄 Docs
|
|
### Online
|
|
[https://www.klinecharts.com](https://www.klinecharts.com)
|
|
|
|
### Locale
|
|
Execute command in root directory. [Node.js](https://nodejs.org) is required.
|
|
```bash
|
|
# Install the dependencies
|
|
npm install
|
|
|
|
# Start document service
|
|
npm run docs:dev
|
|
```
|
|
After successful startup, open in the browser http://localhost:8888 .
|
|
|
|
## 🛠️ Build
|
|
Execute command in root directory. [Node.js](https://nodejs.org) is required.
|
|
```bash
|
|
# Install the dependencies
|
|
npm install
|
|
|
|
# Build files
|
|
npm run build
|
|
```
|
|
The generated files are in the dist folder.
|
|
|
|
## 🔗 Links
|
|
+ [Online Preview](https://preview.klinecharts.com)
|
|
+ [KLineChart Pro](https://pro.klinecharts.com)
|
|
+ [Sample Code](https://github.com/liihuu/KLineChartSample)
|
|
|
|
## ©️ License
|
|
KLineChart is available under the Apache License V2.
|