这是一个示例项目,使用KlineCharts(10.0.0-alpha1)绘制金融K线图,界面UI从KLineChart Pro改写(KLineChart Pro使用Solid-js,本项目改写为svelte)
本项目使用sveltekit
如需vue版本,请参考klinechart-ui-demo(此版本基于KlineChart 9.8.10)
由于交易界面UI要求的定制性一般比较高,将此项目打包为package不太适合自由修改。
所以建议直接clone本项目,提取需要的部分,自由修改页面组件和UI
npm install
npm run dev
国际化
使用inlang的国际化插件
- 在 project.inlang/settings.json 中添加语言标签,并在 messages 文件夹下添加语言文件。
- 在需要使用语言标签的地方,使用:
import * as m from '$lib/paraglide/messages.js'
m.hello()
m['hello']()
注册新指标
在 src/lib/coms.ts 中添加新指标的字段和默认参数。
编译为静态资源
sveltekit支持编译静态资源,只需将svelte.config.js中的adapter-auto
改为adapter-static
,然后执行npm run build
,即可在dist目录下生成静态资源。
数据来源
为演示需要,本项目固定使用KlineChart的假数据,如需使用真实数据,请在src/lib/mydatafeed.ts中取消注释改为自己的接口
云端指标
本项目原生支持云端指标加载和显示,后端需提供/kline/all_inds
和/kline/calc_ind
接口,具体参数请参考src/lib/indicators/cloudInds.ts
单页面多K线
本项目未使用全局store,故理论上支持多窗体,但尚未测试,请自行测试,如有问题请提issue
- 滚动条样式未全局生效
请加KlineChart作者微信,进入微信群,@火木; 或发邮件
Everything you need to build a Svelte project, powered by sv
.
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npx sv create
# create a new project in my-app
npx sv create my-app
Once you've created a project and installed dependencies with npm install
(or pnpm install
or yarn
), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
To deploy your app, you may need to install an adapter for your target environment.