Out of the box
Simple and fast integration, zero cost to get started, only 3 lines of code to display a chart, so that all attention can be focused on data docking.
diff --git a/404.html b/404.html new file mode 100644 index 0000000..0ec90bc --- /dev/null +++ b/404.html @@ -0,0 +1,23 @@ + + +
+ + +免费的专业级K线组件
¥ 0
联系开发者加入开发讨论群。
全方位解答遇到的问题
赞助¥ 500
在赞助页对项目进行捐赠,完成之后联系开发者加入专属答疑群。
专属定制,扩展开发
¥ 面议
联系开发者,讨论具体需求。
Free professional K Line component
$ 0
Contact the developer to join the development discussion group.
Comprehensive answers to development issues
Sponsor$ 78
Sponsor to the project on the sponsorship page, and after completion, contact the developer to join the exclusive Q&A group.
Exclusive customization and extended development
$ Discussion
Contact developers to discuss specific requirements.
Highly customizable professional lightweight financial chart
Easy to use, lightweight and smooth, suitable for web front-end financial chart with rich scenarios.
The chart always fills the container, checking to see if the container has height.
Chart default price precision is two decimal, call setPriceVolumePrecision(pricePrecision, volumePrecision)
to set the precision.
Through style settings.
chart.setStyles({
+ candle: {
+ type: 'area',
+ },
+});
You can override calc
by the chart method createIndicator
or overrideIndicator
.
Charts support custom technical indicators, see indicators for details.
Overlays can be used. The built-in overlay has a simpleAnnotation
, which can be created with the chart api createOverlay({ name: 'simpleAnnotation', ... }, paneId)
.
https://t.me/+098syuQtzI0yNzll
Scan to add developers, note KLineChart, and join the group chat.
If you see this, you may be interested in improving the KLineChart core. Thank you @fish2016 This document was written.
The above diagram shows the hierarchy of chart modules from top to bottom, with the lower layer serving as the upper layer container.
Figure
Basic shapes, such as circle, polygon, rect, text, etc.View
Retrieve data from ChartStore
and perform single business plotting, such as candlesticks, area, grid line, crosshair, indicator, etcWidget
Create canvas and assemble the relevant View
together.Pane
Create dom container and assemble the Widget
together.Chart
Manage the Panes, such as deleting and adding operations, to form the final chart. In addition, event distribution is also carried out to manipulate the data in ChartStore
and notify subordinate components to update as needed.The project adopts a dependency Node.js The package manager for management requires Node.js environment. You can use npm, pnpm, or yarn to install dependencies.
# Root dir run
+npm install
lint
: Run npm run lint
verify code rules.clean
: Run npm run clean
clean up the built files.build-esm
: Run npm run build-esm
built esm module.build-cjs
: Run npm run build-cjs
built commonjs module.build-umd:dev
: Run npm run build-umd:dev
built umd development module.build-umd:prod
: Run npm run build-umd:dev
built umd production module.build-umd
: Run npm run build-umd
built umd development and production module。build-core
: Run npm run build-core
built esm, commonjs umd development and umd production module.build-dts
: Run npm run build-dts
generate typescript dependency files.build
: Run npm run build
built esm, commonjs umd development and umd production module and generate typescript dependency files.This project does not have a debugging project and requires the creation of a new project, use npm link
import,or import index.ts
debug. You can use vite create a project.
KLineChart under the Apache License V2 and completely free to use.
If you think the plugin is good, I hope you can click 🌟 on GitHub. If you can reward a cup of ☕️, that would be very much appreciated.
For organizations or individuals sponsoring KLineChart, no matter how much, if necessary, display the organization's official website or personal homepage on the https://klinecharts.com on the homepage, please provide payment account or address, logo, homepage link, and other information by sending an email to hu_li888@foxmail.com . Those with sponsor amount top three, will use large logo display.
bc1qnwzukszzk5xfk0zs3sr8etzgctgnrtqts43jzp3khe6gm7xazprsp4y6n3
0xd2c3911654db861e0a2e17415e11a209c1fc3594
0xd2c3911654db861e0a2e17415e11a209c1fc3594
THJpTQmFGaVm12KE1Jzc5mLXiApP6qXMCi
图表总是会填充容器,检查一下容器是否有高度。
图表默认价格精度为两位小数,调用setPriceVolumePrecision(pricePrecision, volumePrecision)
设置下精度。
通过样式设置。
chart.setStyles({
+ candle: {
+ type: 'area',
+ },
+});
可以通过图表方法createIndicator
或者overrideIndicator
重写calc
即可。
图表支持自定义技术指标,详情参阅技术指标。
可以使用覆盖物,内置的覆盖物有一个simpleAnnotation
,用图表api创建即可createOverlay({ name: 'simpleAnnotation', ... }, paneId)
。
https://t.me/+098syuQtzI0yNzll
扫一扫,添加开发者,备注『 KLineChart 』,加入群聊。
如果你看到此处,你可能会对改进 KLineChart 核心感兴趣。感谢 @fish2016 编写的此文档。
上图是按照下层作为上层的容器,从上到下列出图表模块层级。
Figure
基本图形,如圆(circle),多边形(polygon),矩形(rect),文本(text)等。View
从 ChartStore
中获取数据,进行单一业务绘制,如k线柱,面积图,网格线,十字光标线,指标等等。Widget
创建canvas,将相关的 View
进行组装到一起。Pane
创建dom容器,将Widget
组装到一起。Chart
对Pane进行管理,例如删除和添加操作,形成最终的图表。此外,还进行事件分发,对ChartStore
里面的数据进行操作,根据需要通知下级组件进行更新。项目采用依赖 Node.js 的包管理器管理,所以需要 Node.js 环境。 你可以使用 npm,pnpm 或者 yarn 来安装依赖。
# 项目根目录下执行
+npm install
lint
:运行 npm run lint
检验代码规则。clean
:运行 npm run clean
进行清理打包好的文件。build-esm
:运行 npm run build-esm
打包成 esm 模块。build-cjs
:运行 npm run build-cjs
打包成 commonjs 模块。build-umd:dev
:运行 npm run build-umd:dev
打包成 umd 开发环境模块。build-umd:prod
:运行 npm run build-umd:dev
打包成 umd 生产环境模块。build-umd
:运行 npm run build-umd
同时打包 umd 开发环境和生产环境模块。build-core
:运行 npm run build-core
同时打包 esm 模块,commonjs 模块,umd 开发环境和生产环境模块。build-dts
:运行 npm run build-dts
生成 typescript 依赖文件。build
:运行 npm run build
同时打包 esm 模块,commonjs 模块,umd 开发环境和生产环境模块并生成 typescript 依赖文件。此项目没有调试项目,需要创建新的工程,用 npm link
引入,或者直接引入 index.ts
入口文件的方式进行调试。你可以使用 vite 进行项目创建。
KLineChart 是采用 Apache-2.0 许可的开源项目,使用完全免费。
如果你觉得插件还不错,希望你能在 GitHub 点一个 🌟。如果能够打赏一杯 ☕️,那就真的太感谢了。
对于赞助 KLineChart 的组织或个人,无论数额多少,如果需要将组织官网或者个人主页展示在 https://klinecharts.com 首页,请提供付款账号或地址,logo,主页链接等信息,发送邮件到 hu_li888@foxmail.com 。赞助额前三名,将使用超大logo展示。
bc1qnwzukszzk5xfk0zs3sr8etzgctgnrtqts43jzp3khe6gm7xazprsp4y6n3
0xd2c3911654db861e0a2e17415e11a209c1fc3594
0xd2c3911654db861e0a2e17415e11a209c1fc3594
THJpTQmFGaVm12KE1Jzc5mLXiApP6qXMCi