This commit is contained in:
liihuu 2024-10-31 00:52:12 +08:00
parent b46107f3fa
commit b585bf617c
212 changed files with 628 additions and 628 deletions

View File

@ -6,9 +6,9 @@
<title>404 | KLineChart</title>
<meta name="description" content="Not Found">
<meta name="generator" content="VitePress v1.4.1">
<link rel="preload stylesheet" href="/assets/style.CSyIL5sQ.css" as="style">
<script type="module" src="/assets/chunks/metadata.7a36d8b1.js"></script>
<script type="module" src="/assets/app.CrtZ_FqZ.js"></script>
<link rel="preload stylesheet" href="/assets/style.Vm6m-FK7.css" as="style">
<script type="module" src="/assets/chunks/metadata.77dfc3a5.js"></script>
<script type="module" src="/assets/app.BwJStKaU.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="icon" type="image/svg+xml" href="/images/logo.svg">
<script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?f5f0d6d79a8fb0825e285ab72dc542cb";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>

View File

@ -1 +1 @@
import{R as i}from"./chunks/theme.Du0wiWLJ.js";import{R as o,a3 as u,a4 as c,a5 as l,a6 as f,a7 as d,a8 as m,a9 as h,aa as g,ab as A,ac as v,d as P,u as R,v as w,s as y,ad as C,ae as b,af as E,ag as S}from"./chunks/framework.Bh2a4ahF.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=p(i),T=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=R();return w(()=>{y(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&C(),b(),E(),s.setup&&s.setup(),()=>S(s.Layout)}});async function D(){globalThis.__VITEPRESS__=!0;const e=j(),a=_();a.provide(c,e);const t=l(e.route);return a.provide(f,t),a.component("Content",d),a.component("ClientOnly",m),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:h}),{app:a,router:e,data:t}}function _(){return g(T)}function j(){let e=o,a;return A(t=>{let n=v(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=import(n)),o&&(e=!1),r},s.NotFound)}o&&D().then(({app:e,router:a,data:t})=>{a.go().then(()=>{u(a.route,t.site),e.mount("#app")})});export{D as createApp};
import{R as i}from"./chunks/theme.DpljECnJ.js";import{R as o,a3 as u,a4 as c,a5 as l,a6 as f,a7 as d,a8 as m,a9 as h,aa as g,ab as A,ac as v,d as P,u as R,v as w,s as y,ad as C,ae as b,af as E,ag as S}from"./chunks/framework.Xx8dNX0P.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=p(i),T=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=R();return w(()=>{y(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&C(),b(),E(),s.setup&&s.setup(),()=>S(s.Layout)}});async function D(){globalThis.__VITEPRESS__=!0;const e=j(),a=_();a.provide(c,e);const t=l(e.route);return a.provide(f,t),a.component("Content",d),a.component("ClientOnly",m),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:h}),{app:a,router:e,data:t}}function _(){return g(T)}function j(){let e=o,a;return A(t=>{let n=v(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=import(n)),o&&(e=!1),r},s.NotFound)}o&&D().then(({app:e,router:a,data:t})=>{a.go().then(()=>{u(a.route,t.site),e.mount("#app")})});export{D as createApp};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
import{_ as o,p as d,o as e,c as a,j as t,F as s,C as p,t as r,a as x}from"./framework.Bh2a4ahF.js";const _="/images/style.jpg",h={class:"style-explain"},k={class:"style-explain-item"},m={__name:"Explain",setup(u){const l=d(["grid.horizontal","grid.vertical","candle.bar","candle.candle.priceMark.last.line","candle.candle.priceMark.last.text","candle.candle.priceMark.high","candle.candle.priceMark.low","candle.candle.tooltip","indicator.ohlc","indicator.lastValueMark","indicator.tooltip","xAxis.axisLine","xAxis.tickLine","xAxis.tickText","yAxis.axisLine","yAxis.tickLine","yAxis.tickText","separator","crosshair.horizontal.line","crosshair.horizontal.text","crosshair.vertical.line","crosshair.vertical.text","overlay"]);return(g,i)=>(e(),a(s,null,[i[0]||(i[0]=t("img",{src:_},null,-1)),t("div",h,[(e(!0),a(s,null,p(l.value,(n,c)=>(e(),a("span",k,[t("strong",null,r(c+1),1),x(" "+r(n),1)]))),256))])],64))}},v=o(m,[["__scopeId","data-v-4191d298"]]);export{v as S};
import{_ as o,p as d,o as e,c as a,j as t,F as s,C as p,t as r,a as x}from"./framework.Xx8dNX0P.js";const _="/images/style.jpg",h={class:"style-explain"},k={class:"style-explain-item"},m={__name:"Explain",setup(u){const l=d(["grid.horizontal","grid.vertical","candle.bar","candle.candle.priceMark.last.line","candle.candle.priceMark.last.text","candle.candle.priceMark.high","candle.candle.priceMark.low","candle.candle.tooltip","indicator.ohlc","indicator.lastValueMark","indicator.tooltip","xAxis.axisLine","xAxis.tickLine","xAxis.tickText","yAxis.axisLine","yAxis.tickLine","yAxis.tickText","separator","crosshair.horizontal.line","crosshair.horizontal.text","crosshair.vertical.line","crosshair.vertical.text","overlay"]);return(g,i)=>(e(),a(s,null,[i[0]||(i[0]=t("img",{src:_},null,-1)),t("div",h,[(e(!0),a(s,null,p(l.value,(n,c)=>(e(),a("span",k,[t("strong",null,r(c+1),1),x(" "+r(n),1)]))),256))])],64))}},v=o(m,[["__scopeId","data-v-4191d298"]]);export{v as S};

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
import{_ as m,o as c,c as n,F as _,C as h,j as e,a as u,t as o,u as z,k as s,G as a}from"./framework.Bh2a4ahF.js";const v={class:"feature-list"},C={__name:"FeatureList",props:["features"],setup(l){const t=l;return(d,i)=>(c(),n("ul",v,[(c(!0),n(_,null,h(t.features,p=>(c(),n("li",null,[i[0]||(i[0]=e("svg",{class:"feature-list-item-icon",viewBox:"0 0 1024 1024"},[e("path",{d:"M512.506025 6.906294c-278.758842 0-505.57773 226.820935-505.57773 505.579777 0 278.797727 226.781026 505.576707 505.57773 505.576707 278.797727 0 505.57773-226.77898 505.57773-505.576707C1018.083755 233.727229 791.303752 6.906294 512.506025 6.906294L512.506025 6.906294zM807.507806 412.036287l-331.285149 334.883093c-0.081864 0.081864-0.246617 0.127913-0.334621 0.25378-0.12075 0.079818-0.12075 0.245593-0.246617 0.328481-2.644223 2.562359-5.915733 4.133134-8.977465 5.876847-1.527796 0.865717-2.771113 2.189875-4.387937 2.808976-4.962012 1.987261-10.213619 3.022847-15.473413 3.022847-5.296633 0-10.631128-1.035586-15.637142-3.105734-1.653663-0.700965-2.980891-2.109034-4.551666-2.978844-3.061732-1.736551-6.244214-3.269463-8.895601-5.872754-0.081864-0.079818-0.125867-0.251733-0.207731-0.333598-0.081864-0.119727-0.245593-0.119727-0.328481-0.246617l-162.930813-167.443593c-15.928784-16.383132-15.555278-42.569538 0.827855-58.499345 16.382109-15.889899 42.531676-15.597233 58.504462 0.827855l133.51076 137.193639L748.712725 353.823468c16.054651-16.257266 42.285059-16.419971 58.505485-0.327458C823.391565 369.5875 823.55427 395.782092 807.507806 412.036287L807.507806 412.036287zM807.507806 412.036287"})],-1)),u(" "+o(p),1)]))),256))]))}},r=m(C,[["__scopeId","data-v-7f509ade"]]),f={class:"customize"},N={class:"customize-title"},g={class:"customize-content"},x={class:"customize-content-item customize-content-free-item"},F={class:"customize-content-item-title-container"},L={class:"customize-content-item-title"},S={class:"customize-content-item-sub-title"},$={class:"customize-content-item-price"},b={class:"customize-content-item-tip"},j={class:"customize-content-item customize-content-qa-item"},A={class:"customize-content-item-title-container"},B={class:"customize-content-item-title"},D={class:"customize-content-item-sub-title"},I={class:"customize-content-item-price"},M={style:{"font-size":"14px","padding-right":"6px","padding-top":"4px","font-weight":"normal"}},k={class:"customize-content-item-tip"},w={class:"customize-content-item customize-content-custom-item"},y={class:"customize-content-item-title-container"},E={class:"customize-content-item-title"},V={class:"customize-content-item-sub-title"},q={class:"customize-content-item-price"},H={class:"customize-content-item-tip"},K={__name:"index",setup(l){const{lang:t}=z();return(d,i)=>(c(),n("div",f,[e("h1",N,o(s(t)==="zh-CN"?"定制化服务":"Customized Service"),1),e("div",g,[e("div",x,[e("div",F,[e("h3",L,o(s(t)==="zh-CN"?"免费版":"Free"),1),e("p",S,o(s(t)==="zh-CN"?"免费的专业级K线组件":"Free professional K Line component"),1),e("p",$,o(s(t)==="zh-CN"?"¥ 0":"$ 0"),1)]),a(r,{features:s(t)==="zh-CN"?["高度可扩展的核心图表","功能完善的Pro版图表","完善的开发文档","开发讨论微信群"]:["Highly scalable core chart","Full features Pro version chart","Complete development documents","Development discussion WeChat group"]},null,8,["features"]),e("p",b,o(s(t)==="zh-CN"?"联系开发者加入开发讨论群。":"Contact the developer to join the development discussion group."),1)]),e("div",j,[e("div",A,[e("h3",B,o(s(t)==="zh-CN"?"赞助版":"Sponsor"),1),e("p",D,o(s(t)==="zh-CN"?"全方位解答遇到的问题":"Comprehensive answers to development issues"),1),e("p",I,[e("span",M,o(s(t)==="zh-CN"?"赞助":"Sponsor"),1),u(o(s(t)==="zh-CN"?"¥ 500":"$ 78"),1)])]),a(r,{features:s(t)==="zh-CN"?["免费版所有服务","更多的示例代码","首页赞助商广告位","一对一答疑"]:["All services in the free version","More sample codes","Homepage sponsor advertising space","One-on-one Q&A"]},null,8,["features"]),e("p",k,o(s(t)==="zh-CN"?"在赞助页对项目进行捐赠,完成之后联系开发者加入专属答疑群。":"Sponsor to the project on the sponsorship page, and after completion, contact the developer to join the exclusive Q&A group."),1)]),e("div",w,[e("div",y,[e("h3",E,o(s(t)==="zh-CN"?"定制版":"Customized"),1),e("p",V,o(s(t)==="zh-CN"?"专属定制,扩展开发":"Exclusive customization and extended development"),1),e("p",q,o(s(t)==="zh-CN"?"¥ 面议":"$ Discussion"),1)]),a(r,{features:s(t)==="zh-CN"?["赞助版所有服务","UI定制开发","扩展定制开发","其它图表相关定制开发"]:["All services of the sponsored version","UI custom development","Extended custom development","Other chart custom development"]},null,8,["features"]),e("p",H,o(s(t)==="zh-CN"?"联系开发者,讨论具体需求。":"Contact developers to discuss specific requirements."),1)])])]))}},P=m(K,[["__scopeId","data-v-26542f2e"]]);export{P as C};
import{_ as m,o as c,c as n,F as _,C as h,j as e,a as u,t as o,u as z,k as s,G as a}from"./framework.Xx8dNX0P.js";const v={class:"feature-list"},C={__name:"FeatureList",props:["features"],setup(l){const t=l;return(d,i)=>(c(),n("ul",v,[(c(!0),n(_,null,h(t.features,p=>(c(),n("li",null,[i[0]||(i[0]=e("svg",{class:"feature-list-item-icon",viewBox:"0 0 1024 1024"},[e("path",{d:"M512.506025 6.906294c-278.758842 0-505.57773 226.820935-505.57773 505.579777 0 278.797727 226.781026 505.576707 505.57773 505.576707 278.797727 0 505.57773-226.77898 505.57773-505.576707C1018.083755 233.727229 791.303752 6.906294 512.506025 6.906294L512.506025 6.906294zM807.507806 412.036287l-331.285149 334.883093c-0.081864 0.081864-0.246617 0.127913-0.334621 0.25378-0.12075 0.079818-0.12075 0.245593-0.246617 0.328481-2.644223 2.562359-5.915733 4.133134-8.977465 5.876847-1.527796 0.865717-2.771113 2.189875-4.387937 2.808976-4.962012 1.987261-10.213619 3.022847-15.473413 3.022847-5.296633 0-10.631128-1.035586-15.637142-3.105734-1.653663-0.700965-2.980891-2.109034-4.551666-2.978844-3.061732-1.736551-6.244214-3.269463-8.895601-5.872754-0.081864-0.079818-0.125867-0.251733-0.207731-0.333598-0.081864-0.119727-0.245593-0.119727-0.328481-0.246617l-162.930813-167.443593c-15.928784-16.383132-15.555278-42.569538 0.827855-58.499345 16.382109-15.889899 42.531676-15.597233 58.504462 0.827855l133.51076 137.193639L748.712725 353.823468c16.054651-16.257266 42.285059-16.419971 58.505485-0.327458C823.391565 369.5875 823.55427 395.782092 807.507806 412.036287L807.507806 412.036287zM807.507806 412.036287"})],-1)),u(" "+o(p),1)]))),256))]))}},r=m(C,[["__scopeId","data-v-7f509ade"]]),f={class:"customize"},N={class:"customize-title"},g={class:"customize-content"},x={class:"customize-content-item customize-content-free-item"},F={class:"customize-content-item-title-container"},L={class:"customize-content-item-title"},S={class:"customize-content-item-sub-title"},$={class:"customize-content-item-price"},b={class:"customize-content-item-tip"},j={class:"customize-content-item customize-content-qa-item"},A={class:"customize-content-item-title-container"},B={class:"customize-content-item-title"},D={class:"customize-content-item-sub-title"},I={class:"customize-content-item-price"},M={style:{"font-size":"14px","padding-right":"6px","padding-top":"4px","font-weight":"normal"}},k={class:"customize-content-item-tip"},w={class:"customize-content-item customize-content-custom-item"},y={class:"customize-content-item-title-container"},E={class:"customize-content-item-title"},V={class:"customize-content-item-sub-title"},q={class:"customize-content-item-price"},H={class:"customize-content-item-tip"},K={__name:"index",setup(l){const{lang:t}=z();return(d,i)=>(c(),n("div",f,[e("h1",N,o(s(t)==="zh-CN"?"定制化服务":"Customized Service"),1),e("div",g,[e("div",x,[e("div",F,[e("h3",L,o(s(t)==="zh-CN"?"免费版":"Free"),1),e("p",S,o(s(t)==="zh-CN"?"免费的专业级K线组件":"Free professional K Line component"),1),e("p",$,o(s(t)==="zh-CN"?"¥ 0":"$ 0"),1)]),a(r,{features:s(t)==="zh-CN"?["高度可扩展的核心图表","功能完善的Pro版图表","完善的开发文档","开发讨论微信群"]:["Highly scalable core chart","Full features Pro version chart","Complete development documents","Development discussion WeChat group"]},null,8,["features"]),e("p",b,o(s(t)==="zh-CN"?"联系开发者加入开发讨论群。":"Contact the developer to join the development discussion group."),1)]),e("div",j,[e("div",A,[e("h3",B,o(s(t)==="zh-CN"?"赞助版":"Sponsor"),1),e("p",D,o(s(t)==="zh-CN"?"全方位解答遇到的问题":"Comprehensive answers to development issues"),1),e("p",I,[e("span",M,o(s(t)==="zh-CN"?"赞助":"Sponsor"),1),u(o(s(t)==="zh-CN"?"¥ 500":"$ 78"),1)])]),a(r,{features:s(t)==="zh-CN"?["免费版所有服务","更多的示例代码","首页赞助商广告位","一对一答疑"]:["All services in the free version","More sample codes","Homepage sponsor advertising space","One-on-one Q&A"]},null,8,["features"]),e("p",k,o(s(t)==="zh-CN"?"在赞助页对项目进行捐赠,完成之后联系开发者加入专属答疑群。":"Sponsor to the project on the sponsorship page, and after completion, contact the developer to join the exclusive Q&A group."),1)]),e("div",w,[e("div",y,[e("h3",E,o(s(t)==="zh-CN"?"定制版":"Customized"),1),e("p",V,o(s(t)==="zh-CN"?"专属定制,扩展开发":"Exclusive customization and extended development"),1),e("p",q,o(s(t)==="zh-CN"?"¥ 面议":"$ Discussion"),1)]),a(r,{features:s(t)==="zh-CN"?["赞助版所有服务","UI定制开发","扩展定制开发","其它图表相关定制开发"]:["All services of the sponsored version","UI custom development","Extended custom development","Other chart custom development"]},null,8,["features"]),e("p",H,o(s(t)==="zh-CN"?"联系开发者,讨论具体需求。":"Contact developers to discuss specific requirements."),1)])])]))}},P=m(K,[["__scopeId","data-v-26542f2e"]]);export{P as C};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as i,b as s,k as n,U as r,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init, registerLocale } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nregisterLocale('zh-HK', {\\n time: '時間:',\\n open: '開:',\\n high: '高:',\\n low: '低:',\\n close: '收:',\\n volume: '成交量:'\\n})\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setLang (lang) {\\n chart.setLocale(lang)\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'zh-CN', text: '简体中文' },\\n { key: 'zh-HK', text: '繁体中文' },\\n { key: 'en-US', text: 'English' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setLang(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)\\n"}`),h={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(p,d)=>(i(),s(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as i,b as s,k as n,U as r,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init, registerLocale } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nregisterLocale('zh-HK', {\\n time: '時間:',\\n open: '開:',\\n high: '高:',\\n low: '低:',\\n close: '收:',\\n volume: '成交量:'\\n})\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setLang (lang) {\\n chart.setLocale(lang)\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'zh-CN', text: '简体中文' },\\n { key: 'zh-HK', text: '繁体中文' },\\n { key: 'en-US', text: 'English' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setLang(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)\\n"}`),h={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(p,d)=>(i(),s(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as s,b as i,k as n,U as r,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setType (type) {\\n chart.setStyles({\\n candle: { type }\\n })\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'candle_solid', text: '全实心-All solid' },\\n { key: 'candle_stroke', text: '全空心-All stroke' },\\n { key: 'candle_up_stroke', text: '涨空心-Up stroke' },\\n { key: 'candle_down_stroke', text: '跌空心-Down stroke' },\\n { key: 'ohlc', text: 'OHLC' },\\n { key: 'area', text: '面积图-Area' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setType(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)"}`),m={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),o=a();return(p,d)=>(s(),i(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o).title.value},null,8,["js","html","css","title"]))}};export{m as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as s,b as i,k as n,U as r,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setType (type) {\\n chart.setStyles({\\n candle: { type }\\n })\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'candle_solid', text: '全实心-All solid' },\\n { key: 'candle_stroke', text: '全空心-All stroke' },\\n { key: 'candle_up_stroke', text: '涨空心-Up stroke' },\\n { key: 'candle_down_stroke', text: '跌空心-Down stroke' },\\n { key: 'ohlc', text: 'OHLC' },\\n { key: 'area', text: '面积图-Area' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setType(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)"}`),m={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),o=a();return(p,d)=>(s(),i(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o).title.value},null,8,["js","html","css","title"]))}};export{m as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as s,b as i,k as t,U as r,V as c}from"./framework.Bh2a4ahF.js";const n=JSON.parse(`{"html":"<div id=\\"k-line-chart\\" style=\\"height:430px\\"/>","js":"import { init } from 'klinecharts'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())"}`),d={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(h,m)=>(s(),i(t(e),{js:t(n).js,html:t(n).html,title:t(o)},null,8,["js","html","title"]))}};export{d as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as s,b as i,k as t,U as r,V as c}from"./framework.Xx8dNX0P.js";const n=JSON.parse(`{"html":"<div id=\\"k-line-chart\\" style=\\"height:430px\\"/>","js":"import { init } from 'klinecharts'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())"}`),d={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(h,m)=>(s(),i(t(e),{js:t(n).js,html:t(n).html,title:t(o)},null,8,["js","html","title"]))}};export{d as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as i,o as r,b as a,k as n,U as s,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init, registerOverlay } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nregisterOverlay({\\n name: 'circle',\\n needDefaultPointFigure: true,\\n needDefaultXAxisFigure: true,\\n needDefaultYAxisFigure: true,\\n totalStep: 3,\\n createPointFigures: ({ coordinates }) => {\\n if (coordinates.length === 2) {\\n const xDis = Math.abs(coordinates[0].x - coordinates[1].x)\\n const yDis = Math.abs(coordinates[0].y - coordinates[1].y)\\n const radius = Math.sqrt(xDis * xDis + yDis * yDis)\\n return {\\n key: 'circle',\\n type: 'circle',\\n attrs: {\\n ...coordinates[0],\\n r: radius\\n },\\n styles: {\\n style: 'stroke_fill'\\n }\\n }\\n }\\n return []\\n }\\n})\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction createOverlay (name) {\\n chart.createOverlay(name)\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'priceLine', text: '价格线(内置)-Price line(built-in)' },\\n { key: 'circle', text: '圆(自定义)-Circle(custom)' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { createOverlay(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)"}`),m={__name:"index",setup(l){const e=s(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=i();return(d,u)=>(r(),a(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{m as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as i,o as r,b as a,k as n,U as s,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init, registerOverlay } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nregisterOverlay({\\n name: 'circle',\\n needDefaultPointFigure: true,\\n needDefaultXAxisFigure: true,\\n needDefaultYAxisFigure: true,\\n totalStep: 3,\\n createPointFigures: ({ coordinates }) => {\\n if (coordinates.length === 2) {\\n const xDis = Math.abs(coordinates[0].x - coordinates[1].x)\\n const yDis = Math.abs(coordinates[0].y - coordinates[1].y)\\n const radius = Math.sqrt(xDis * xDis + yDis * yDis)\\n return {\\n key: 'circle',\\n type: 'circle',\\n attrs: {\\n ...coordinates[0],\\n r: radius\\n },\\n styles: {\\n style: 'stroke_fill'\\n }\\n }\\n }\\n return []\\n }\\n})\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction createOverlay (name) {\\n chart.createOverlay(name)\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'priceLine', text: '价格线(内置)-Price line(built-in)' },\\n { key: 'circle', text: '圆(自定义)-Circle(custom)' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { createOverlay(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)"}`),m={__name:"index",setup(l){const e=s(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=i();return(d,u)=>(r(),a(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{m as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as i,b as r,k as n,U as s,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init, registerIndicator } from 'klinecharts'\\nimport './index.css'\\n\\nconst fruits = [\\n '🍏', '🍎', '🍐', '🍊', '🍋', '🍌',\\n '🍉', '🍇', '🍓', '🍈', '🍒', '🍑',\\n '🍍', '🥥', '🥝', '🥭', '🥑', '🍏'\\n]\\n\\nregisterIndicator({\\n name: 'Custom',\\n figures: [\\n { key: 'emoji' }\\n ],\\n calc: (kLineDataList) => {\\n return kLineDataList.map(kLineData => ({ emoji: kLineData.close, text: fruits[Math.floor(Math.random() * 17)] }))\\n },\\n draw: ({\\n ctx,\\n barSpace,\\n visibleRange,\\n indicator,\\n xAxis,\\n yAxis\\n }) => {\\n const { from, to } = visibleRange\\n\\n ctx.font = barSpace.gapBar + 'px' + ' Helvetica Neue'\\n ctx.textAlign = 'center'\\n const result = indicator.result\\n for (let i = from; i < to; i++) {\\n const data = result[i]\\n const x = xAxis.convertToPixel(i)\\n const y = yAxis.convertToPixel(data.emoji)\\n ctx.fillText(data.text, x, y)\\n }\\n return false\\n }\\n})\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setMainIndicator(name) {\\n chart.createIndicator(name, true, { id: 'candle_pane' })\\n}\\n\\nfunction setSubIndicator(name) {\\n chart.createIndicator(name)\\n}\\n\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\n\\nconst mainIndicators = ['MA', 'BOLL', 'Custom']\\nconst subIndicators = ['VOL', 'MACD', 'Custom']\\n\\nconst mainTitle = document.createElement('span')\\nmainTitle.innerText = '主图指标-Main indicator: '\\nbuttonContainer.appendChild(mainTitle)\\nmainIndicators.forEach((name) => {\\n const button = document.createElement('button')\\n button.innerText = name\\n button.addEventListener('click', () => { setMainIndicator(name) })\\n buttonContainer.appendChild(button)\\n})\\n\\nconst subTitle = document.createElement('span')\\nsubTitle.style.paddingLeft = '16px'\\nsubTitle.innerText = '副图指标-Sub indicator: '\\nbuttonContainer.appendChild(subTitle)\\nsubIndicators.forEach((name) => {\\n const button = document.createElement('button')\\n button.innerText = name\\n button.addEventListener('click', () => { setSubIndicator(name) })\\n buttonContainer.appendChild(button)\\n})\\n\\ncontainer.appendChild(buttonContainer)"}`),p={__name:"index",setup(d){const e=s(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(l,u)=>(i(),r(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{p as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as i,b as r,k as n,U as s,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init, registerIndicator } from 'klinecharts'\\nimport './index.css'\\n\\nconst fruits = [\\n '🍏', '🍎', '🍐', '🍊', '🍋', '🍌',\\n '🍉', '🍇', '🍓', '🍈', '🍒', '🍑',\\n '🍍', '🥥', '🥝', '🥭', '🥑', '🍏'\\n]\\n\\nregisterIndicator({\\n name: 'Custom',\\n figures: [\\n { key: 'emoji' }\\n ],\\n calc: (kLineDataList) => {\\n return kLineDataList.map(kLineData => ({ emoji: kLineData.close, text: fruits[Math.floor(Math.random() * 17)] }))\\n },\\n draw: ({\\n ctx,\\n barSpace,\\n visibleRange,\\n indicator,\\n xAxis,\\n yAxis\\n }) => {\\n const { from, to } = visibleRange\\n\\n ctx.font = barSpace.gapBar + 'px' + ' Helvetica Neue'\\n ctx.textAlign = 'center'\\n const result = indicator.result\\n for (let i = from; i < to; i++) {\\n const data = result[i]\\n const x = xAxis.convertToPixel(i)\\n const y = yAxis.convertToPixel(data.emoji)\\n ctx.fillText(data.text, x, y)\\n }\\n return false\\n }\\n})\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setMainIndicator(name) {\\n chart.createIndicator(name, true, { id: 'candle_pane' })\\n}\\n\\nfunction setSubIndicator(name) {\\n chart.createIndicator(name)\\n}\\n\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\n\\nconst mainIndicators = ['MA', 'BOLL', 'Custom']\\nconst subIndicators = ['VOL', 'MACD', 'Custom']\\n\\nconst mainTitle = document.createElement('span')\\nmainTitle.innerText = '主图指标-Main indicator: '\\nbuttonContainer.appendChild(mainTitle)\\nmainIndicators.forEach((name) => {\\n const button = document.createElement('button')\\n button.innerText = name\\n button.addEventListener('click', () => { setMainIndicator(name) })\\n buttonContainer.appendChild(button)\\n})\\n\\nconst subTitle = document.createElement('span')\\nsubTitle.style.paddingLeft = '16px'\\nsubTitle.innerText = '副图指标-Sub indicator: '\\nbuttonContainer.appendChild(subTitle)\\nsubIndicators.forEach((name) => {\\n const button = document.createElement('button')\\n button.innerText = name\\n button.addEventListener('click', () => { setSubIndicator(name) })\\n buttonContainer.appendChild(button)\\n})\\n\\ncontainer.appendChild(buttonContainer)"}`),p={__name:"index",setup(d){const e=s(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(l,u)=>(i(),r(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{p as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as o,o as s,b as i,k as t,U as r,V as c}from"./framework.Bh2a4ahF.js";const a=JSON.parse(`{"html":"<div id=\\"k-line-chart\\" style=\\"height:430px\\"/>","js":"import { init } from 'klinecharts'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\nchart.loadMore((timestamp) => {\\n loadMoreTimer = setTimeout(() => {\\n chart.applyMoreData(genData(timestamp), true)\\n }, 2000)\\n})\\nchart.applyNewData(genData(), true)\\nupdateData()\\n\\nfunction updateData () {\\n setTimeout(() => {\\n const dataList = chart.getDataList()\\n const lastData = dataList[dataList.length - 1]\\n const newData = { ...lastData }\\n newData.close += (Math.random() * 20 - 10)\\n newData.high = Math.max(newData.high, newData.close)\\n newData.low = Math.min(newData.low, newData.close)\\n newData.volume += Math.round(Math.random() * 10)\\n chart.updateData(newData)\\n updateData()\\n }, 600)\\n}\\n"}`),d={__name:"index",setup(h){const n=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:e}=o();return(l,m)=>(s(),i(t(n),{js:t(a).js,html:t(a).html,title:t(e)},null,8,["js","html","title"]))}};export{d as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as o,o as s,b as i,k as t,U as r,V as c}from"./framework.Xx8dNX0P.js";const a=JSON.parse(`{"html":"<div id=\\"k-line-chart\\" style=\\"height:430px\\"/>","js":"import { init } from 'klinecharts'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\nchart.loadMore((timestamp) => {\\n loadMoreTimer = setTimeout(() => {\\n chart.applyMoreData(genData(timestamp), true)\\n }, 2000)\\n})\\nchart.applyNewData(genData(), true)\\nupdateData()\\n\\nfunction updateData () {\\n setTimeout(() => {\\n const dataList = chart.getDataList()\\n const lastData = dataList[dataList.length - 1]\\n const newData = { ...lastData }\\n newData.close += (Math.random() * 20 - 10)\\n newData.high = Math.max(newData.high, newData.close)\\n newData.low = Math.min(newData.low, newData.close)\\n newData.volume += Math.round(Math.random() * 10)\\n chart.updateData(newData)\\n updateData()\\n }, 600)\\n}\\n"}`),d={__name:"index",setup(h){const n=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:e}=o();return(l,m)=>(s(),i(t(n),{js:t(a).js,html:t(a).html,title:t(e)},null,8,["js","html","title"]))}};export{d as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as i,o as a,b as s,k as n,U as r,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setTimezone (timezone) {\\n chart.setTimezone(timezone)\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'Asia/Shanghai', text: '上海-Shanghai' },\\n { key: 'Europe/Berlin', text: '柏林-Berlin' },\\n { key: 'America/Chicago', text: '芝加哥-Chicago' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setTimezone(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)"}`),h={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=i();return(p,d)=>(a(),s(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as i,o as a,b as s,k as n,U as r,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setTimezone (timezone) {\\n chart.setTimezone(timezone)\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\nconst items = [\\n { key: 'Asia/Shanghai', text: '上海-Shanghai' },\\n { key: 'Europe/Berlin', text: '柏林-Berlin' },\\n { key: 'America/Chicago', text: '芝加哥-Chicago' }\\n]\\nitems.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setTimezone(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)"}`),h={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=i();return(p,d)=>(a(),s(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as i,b as s,k as n,U as r,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container:last-child {\\n margin-top: 0;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.createIndicator('MA', false, { id: 'candle_pane' })\\nchart.createIndicator('VOL')\\nchart.applyNewData(genData())\\n\\nfunction setCandleTooltipShowRule (showRule) {\\n chart.setStyles({\\n candle: {\\n tooltip: {\\n showRule\\n }\\n }\\n })\\n}\\n\\nfunction setCandleTooltipShowType (showType) {\\n chart.setStyles({\\n candle: {\\n tooltip: {\\n showType\\n }\\n }\\n })\\n}\\n\\nfunction setIndicatorTooltipShowRule (showRule) {\\n chart.setStyles({\\n indicator: {\\n tooltip: {\\n showRule\\n }\\n }\\n })\\n}\\n\\nfunction setIndicatorTooltipShowType (showType) {\\n chart.setStyles({\\n indicator: {\\n tooltip: {\\n showType\\n }\\n }\\n })\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst rules = [\\n { key: 'always', text: '总是显示-Always display' },\\n { key: 'follow_cross', text: '跟随十字光标-Follow cross' },\\n { key: 'none', text: '不显示-Hide' }\\n]\\nconst types = [\\n { key: 'standard', text: '默认-Standard' },\\n { key: 'rect', text: '矩形框-Rect' }\\n]\\n\\nconst baseButtonContainer = document.createElement('div')\\nbaseButtonContainer.className = 'button-container'\\nconst baseTitle = document.createElement('span')\\nbaseTitle.innerText = '基础信息提示-Base info tip: '\\nbaseButtonContainer.appendChild(baseTitle)\\n\\nrules.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setCandleTooltipShowRule(key) })\\n baseButtonContainer.appendChild(button)\\n})\\n\\ntypes.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setCandleTooltipShowType(key) })\\n baseButtonContainer.appendChild(button)\\n})\\ncontainer.appendChild(baseButtonContainer)\\n\\nconst indicatorButtonContainer = document.createElement('div')\\nindicatorButtonContainer.className = 'button-container'\\nconst indicatorTitle = document.createElement('span')\\nindicatorTitle.innerText = '指标信息提示-Indicator info tip: '\\nindicatorButtonContainer.appendChild(indicatorTitle)\\n\\nrules.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setIndicatorTooltipShowRule(key) })\\n indicatorButtonContainer.appendChild(button)\\n})\\n\\ntypes.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setIndicatorTooltipShowType(key) })\\n indicatorButtonContainer.appendChild(button)\\n})\\ncontainer.appendChild(indicatorButtonContainer)\\n"}`),h={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(d,p)=>(i(),s(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as a,o as i,b as s,k as n,U as r,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container:last-child {\\n margin-top: 0;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.createIndicator('MA', false, { id: 'candle_pane' })\\nchart.createIndicator('VOL')\\nchart.applyNewData(genData())\\n\\nfunction setCandleTooltipShowRule (showRule) {\\n chart.setStyles({\\n candle: {\\n tooltip: {\\n showRule\\n }\\n }\\n })\\n}\\n\\nfunction setCandleTooltipShowType (showType) {\\n chart.setStyles({\\n candle: {\\n tooltip: {\\n showType\\n }\\n }\\n })\\n}\\n\\nfunction setIndicatorTooltipShowRule (showRule) {\\n chart.setStyles({\\n indicator: {\\n tooltip: {\\n showRule\\n }\\n }\\n })\\n}\\n\\nfunction setIndicatorTooltipShowType (showType) {\\n chart.setStyles({\\n indicator: {\\n tooltip: {\\n showType\\n }\\n }\\n })\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst rules = [\\n { key: 'always', text: '总是显示-Always display' },\\n { key: 'follow_cross', text: '跟随十字光标-Follow cross' },\\n { key: 'none', text: '不显示-Hide' }\\n]\\nconst types = [\\n { key: 'standard', text: '默认-Standard' },\\n { key: 'rect', text: '矩形框-Rect' }\\n]\\n\\nconst baseButtonContainer = document.createElement('div')\\nbaseButtonContainer.className = 'button-container'\\nconst baseTitle = document.createElement('span')\\nbaseTitle.innerText = '基础信息提示-Base info tip: '\\nbaseButtonContainer.appendChild(baseTitle)\\n\\nrules.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setCandleTooltipShowRule(key) })\\n baseButtonContainer.appendChild(button)\\n})\\n\\ntypes.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setCandleTooltipShowType(key) })\\n baseButtonContainer.appendChild(button)\\n})\\ncontainer.appendChild(baseButtonContainer)\\n\\nconst indicatorButtonContainer = document.createElement('div')\\nindicatorButtonContainer.className = 'button-container'\\nconst indicatorTitle = document.createElement('span')\\nindicatorTitle.innerText = '指标信息提示-Indicator info tip: '\\nindicatorButtonContainer.appendChild(indicatorTitle)\\n\\nrules.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setIndicatorTooltipShowRule(key) })\\n indicatorButtonContainer.appendChild(button)\\n})\\n\\ntypes.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setIndicatorTooltipShowType(key) })\\n indicatorButtonContainer.appendChild(button)\\n})\\ncontainer.appendChild(indicatorButtonContainer)\\n"}`),h={__name:"index",setup(l){const e=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=a();return(d,p)=>(i(),s(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};

View File

@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.Di--lH_6.js","assets/chunks/framework.Bh2a4ahF.js","assets/chunks/theme.Du0wiWLJ.js"])))=>i.map(i=>d[i]);
import{u as i,o as s,b as a,k as n,U as r,V as c}from"./framework.Bh2a4ahF.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setPosition (position) {\\n chart.setStyles({\\n yAxis: {\\n position\\n }\\n })\\n}\\n\\nfunction setInside (inside) {\\n chart.setStyles({\\n yAxis: {\\n inside\\n }\\n })\\n}\\n\\nfunction setType (type) {\\n chart.setStyles({\\n yAxis: {\\n type\\n }\\n })\\n}\\n\\nfunction setReverse (reverse) {\\n chart.setStyles({\\n yAxis: {\\n reverse\\n }\\n })\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\n\\nconst positions = [\\n { key: 'right', text: '右侧-Right' },\\n { key: 'left', text: '左侧-Left' }\\n]\\nconst insideOutside = [\\n { key: false, text: '外部-Outside' },\\n { key: true, text: '内部-Inside' }\\n]\\nconst types = [\\n { key: 'normal', text: '线性轴-Liner Axis' },\\n { key: 'percentage', text: '百分比轴-Percentage axis' },\\n { key: 'log', text: '对数轴-Logarithm axis' },\\n]\\nconst reverse = [\\n { key: false, text: '正向-Regularity' },\\n { key: true, text: '反向-Reverse' }\\n]\\npositions.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setPosition(key) })\\n buttonContainer.appendChild(button)\\n})\\ninsideOutside.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setInside(key) })\\n buttonContainer.appendChild(button)\\n})\\ntypes.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setType(key) })\\n buttonContainer.appendChild(button)\\n})\\nreverse.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setReverse(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)\\n"}`),h={__name:"index",setup(d){const e=r(()=>c(()=>import("./Chart.Di--lH_6.js"),__vite__mapDeps([0,1,2]))),{title:o}=i();return(u,l)=>(s(),a(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/Chart.CBGiUIqH.js","assets/chunks/framework.Xx8dNX0P.js","assets/chunks/theme.DpljECnJ.js"])))=>i.map(i=>d[i]);
import{u as i,o as s,b as a,k as n,U as r,V as c}from"./framework.Xx8dNX0P.js";const t=JSON.parse(`{"css":".button-container {\\n display: flex;\\n flex-wrap: wrap;\\n align-items: center;\\n gap: 8px;\\n margin-top: 10px;\\n padding: 10px 22px;\\n}\\n\\n.button-container button {\\n padding: 2px 6px;\\n background-color: #1677FF;\\n border-radius: 4px;\\n font-size: 12px;\\n color: #fff;\\n outline: none;\\n border: none;\\n}","html":"<div id=\\"container\\">\\n <div id=\\"k-line-chart\\" style=\\"height:430px\\">\\n</div>","js":"import { init } from 'klinecharts'\\nimport './index.css'\\n\\nfunction genData (timestamp = new Date().getTime(), length = 800) {\\n let basePrice = 5000\\n timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000\\n const dataList = []\\n for (let i = 0; i < length; i++) {\\n const prices = []\\n for (let j = 0; j < 4; j++) {\\n prices.push(basePrice + Math.random() * 60 - 30)\\n }\\n prices.sort()\\n const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const high = +(prices[3].toFixed(2))\\n const low = +(prices[0].toFixed(2))\\n const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))\\n const volume = Math.round(Math.random() * 100) + 10\\n const turnover = (open + high + low + close) / 4 * volume\\n dataList.push({ timestamp, open, high,low, close, volume, turnover })\\n\\n basePrice = close\\n timestamp += 60 * 1000\\n }\\n return dataList\\n}\\n\\nconst chart = init('k-line-chart')\\nchart.applyNewData(genData())\\n\\nfunction setPosition (position) {\\n chart.setStyles({\\n yAxis: {\\n position\\n }\\n })\\n}\\n\\nfunction setInside (inside) {\\n chart.setStyles({\\n yAxis: {\\n inside\\n }\\n })\\n}\\n\\nfunction setType (type) {\\n chart.setStyles({\\n yAxis: {\\n type\\n }\\n })\\n}\\n\\nfunction setReverse (reverse) {\\n chart.setStyles({\\n yAxis: {\\n reverse\\n }\\n })\\n}\\n\\n// 以下仅仅是为了协助代码演示,在实际项目中根据情况进行调整。\\n// The following is only for the purpose of assisting in code demonstration, and adjustments will be made according to the actual situation in the project.\\nconst container = document.getElementById('container')\\nconst buttonContainer = document.createElement('div')\\nbuttonContainer.className = 'button-container'\\n\\nconst positions = [\\n { key: 'right', text: '右侧-Right' },\\n { key: 'left', text: '左侧-Left' }\\n]\\nconst insideOutside = [\\n { key: false, text: '外部-Outside' },\\n { key: true, text: '内部-Inside' }\\n]\\nconst types = [\\n { key: 'normal', text: '线性轴-Liner Axis' },\\n { key: 'percentage', text: '百分比轴-Percentage axis' },\\n { key: 'log', text: '对数轴-Logarithm axis' },\\n]\\nconst reverse = [\\n { key: false, text: '正向-Regularity' },\\n { key: true, text: '反向-Reverse' }\\n]\\npositions.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setPosition(key) })\\n buttonContainer.appendChild(button)\\n})\\ninsideOutside.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setInside(key) })\\n buttonContainer.appendChild(button)\\n})\\ntypes.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setType(key) })\\n buttonContainer.appendChild(button)\\n})\\nreverse.forEach(({ key, text }) => {\\n const button = document.createElement('button')\\n button.innerText = text\\n button.addEventListener('click', () => { setReverse(key) })\\n buttonContainer.appendChild(button)\\n})\\ncontainer.appendChild(buttonContainer)\\n"}`),h={__name:"index",setup(d){const e=r(()=>c(()=>import("./Chart.CBGiUIqH.js"),__vite__mapDeps([0,1,2]))),{title:o}=i();return(u,l)=>(s(),a(n(e),{js:n(t).js,html:n(t).html,css:n(t).css,title:n(o)},null,8,["js","html","css","title"]))}};export{h as _};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
import{C as e}from"./chunks/index.CofIHBUT.js";import{c as t,G as a,o}from"./chunks/framework.Bh2a4ahF.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"customize.md","filePath":"customize.md","lastUpdated":1727028421000}'),s={name:"customize.md"},p=Object.assign(s,{setup(r){return(c,m)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};
import{C as e}from"./chunks/index.B6ReAPe3.js";import{c as t,G as a,o}from"./chunks/framework.Xx8dNX0P.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"customize.md","filePath":"customize.md","lastUpdated":1727028421000}'),s={name:"customize.md"},p=Object.assign(s,{setup(r){return(c,m)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};

View File

@ -1 +1 @@
import{C as e}from"./chunks/index.CofIHBUT.js";import{c as t,G as a,o}from"./chunks/framework.Bh2a4ahF.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"customize.md","filePath":"customize.md","lastUpdated":1727028421000}'),s={name:"customize.md"},p=Object.assign(s,{setup(r){return(c,m)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};
import{C as e}from"./chunks/index.B6ReAPe3.js";import{c as t,G as a,o}from"./chunks/framework.Xx8dNX0P.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"customize.md","filePath":"customize.md","lastUpdated":1727028421000}'),s={name:"customize.md"},p=Object.assign(s,{setup(r){return(c,m)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};

View File

@ -1 +1 @@
import{C as e}from"./chunks/index.CofIHBUT.js";import{c as t,G as a,o}from"./chunks/framework.Bh2a4ahF.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"en-US/customize.md","filePath":"en-US/customize.md","lastUpdated":1727028421000}'),s={name:"en-US/customize.md"},p=Object.assign(s,{setup(r){return(c,n)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};
import{C as e}from"./chunks/index.B6ReAPe3.js";import{c as t,G as a,o}from"./chunks/framework.Xx8dNX0P.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"en-US/customize.md","filePath":"en-US/customize.md","lastUpdated":1727028421000}'),s={name:"en-US/customize.md"},p=Object.assign(s,{setup(r){return(c,n)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};

View File

@ -1 +1 @@
import{C as e}from"./chunks/index.CofIHBUT.js";import{c as t,G as a,o}from"./chunks/framework.Bh2a4ahF.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"en-US/customize.md","filePath":"en-US/customize.md","lastUpdated":1727028421000}'),s={name:"en-US/customize.md"},p=Object.assign(s,{setup(r){return(c,n)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};
import{C as e}from"./chunks/index.B6ReAPe3.js";import{c as t,G as a,o}from"./chunks/framework.Xx8dNX0P.js";const l=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"en-US/customize.md","filePath":"en-US/customize.md","lastUpdated":1727028421000}'),s={name:"en-US/customize.md"},p=Object.assign(s,{setup(r){return(c,n)=>(o(),t("div",null,[a(e)]))}});export{l as __pageData,p as default};

View File

@ -1,4 +1,4 @@
import{_ as h,B as p,c as k,a2 as n,j as i,a,G as t,w as e,o as r}from"./chunks/framework.Bh2a4ahF.js";const v=JSON.parse('{"title":"Chart API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/chart-api.md","filePath":"en-US/guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},o={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},y={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,m){const l=p("Badge");return r(),k("div",null,[s[49]||(s[49]=n(`<h1 id="chart-api" tabindex="-1">Chart API <a class="header-anchor" href="#chart-api" aria-label="Permalink to &quot;Chart API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
import{_ as h,B as p,c as k,a2 as n,j as i,a,G as t,w as e,o as r}from"./chunks/framework.Xx8dNX0P.js";const v=JSON.parse('{"title":"Chart API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/chart-api.md","filePath":"en-US/guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},o={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},y={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,m){const l=p("Badge");return r(),k("div",null,[s[49]||(s[49]=n(`<h1 id="chart-api" tabindex="-1">Chart API <a class="header-anchor" href="#chart-api" aria-label="Permalink to &quot;Chart API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ds: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout?: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Array</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{</span></span>

View File

@ -1,4 +1,4 @@
import{_ as h,B as p,c as k,a2 as n,j as i,a,G as t,w as e,o as r}from"./chunks/framework.Bh2a4ahF.js";const v=JSON.parse('{"title":"Chart API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/chart-api.md","filePath":"en-US/guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},o={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},y={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,m){const l=p("Badge");return r(),k("div",null,[s[49]||(s[49]=n(`<h1 id="chart-api" tabindex="-1">Chart API <a class="header-anchor" href="#chart-api" aria-label="Permalink to &quot;Chart API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
import{_ as h,B as p,c as k,a2 as n,j as i,a,G as t,w as e,o as r}from"./chunks/framework.Xx8dNX0P.js";const v=JSON.parse('{"title":"Chart API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/chart-api.md","filePath":"en-US/guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},o={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},y={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,m){const l=p("Badge");return r(),k("div",null,[s[49]||(s[49]=n(`<h1 id="chart-api" tabindex="-1">Chart API <a class="header-anchor" href="#chart-api" aria-label="Permalink to &quot;Chart API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ds: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout?: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Array</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{</span></span>

View File

@ -1,4 +1,4 @@
import{_ as t,B as p,c as h,j as a,a as i,G as e,w as l,a2 as k,o as r}from"./chunks/framework.Bh2a4ahF.js";const A=JSON.parse('{"title":"Custom Axis ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/custom-axis.md","filePath":"en-US/guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"en-US/guide/custom-axis.md"},E={id:"custom-axis-9-8-0",tabindex:"-1"};function g(c,s,o,y,F,u){const n=p("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("Custom Axis ")),e(n,null,{default:l(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#custom-axis-9-8-0","aria-label":'Permalink to "Custom Axis <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=k(`<p>Chart support custom axis, which can be achieved through the chart api <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> and <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a>.</p><h2 id="input-params-introduction" tabindex="-1">Input params introduction <a class="header-anchor" href="#input-params-introduction" aria-label="Permalink to &quot;Input params introduction&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as t,B as p,c as h,j as a,a as i,G as e,w as l,a2 as k,o as r}from"./chunks/framework.Xx8dNX0P.js";const A=JSON.parse('{"title":"Custom Axis ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/custom-axis.md","filePath":"en-US/guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"en-US/guide/custom-axis.md"},E={id:"custom-axis-9-8-0",tabindex:"-1"};function g(c,s,o,y,F,u){const n=p("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("Custom Axis ")),e(n,null,{default:l(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#custom-axis-9-8-0","aria-label":'Permalink to "Custom Axis <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=k(`<p>Chart support custom axis, which can be achieved through the chart api <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> and <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a>.</p><h2 id="input-params-introduction" tabindex="-1">Input params introduction <a class="header-anchor" href="#input-params-introduction" aria-label="Permalink to &quot;Input params introduction&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // axis name</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // implementation of create ticks</span></span>

View File

@ -1,4 +1,4 @@
import{_ as t,B as p,c as h,j as a,a as i,G as e,w as l,a2 as k,o as r}from"./chunks/framework.Bh2a4ahF.js";const A=JSON.parse('{"title":"Custom Axis ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/custom-axis.md","filePath":"en-US/guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"en-US/guide/custom-axis.md"},E={id:"custom-axis-9-8-0",tabindex:"-1"};function g(c,s,o,y,F,u){const n=p("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("Custom Axis ")),e(n,null,{default:l(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#custom-axis-9-8-0","aria-label":'Permalink to "Custom Axis <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=k(`<p>Chart support custom axis, which can be achieved through the chart api <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> and <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a>.</p><h2 id="input-params-introduction" tabindex="-1">Input params introduction <a class="header-anchor" href="#input-params-introduction" aria-label="Permalink to &quot;Input params introduction&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as t,B as p,c as h,j as a,a as i,G as e,w as l,a2 as k,o as r}from"./chunks/framework.Xx8dNX0P.js";const A=JSON.parse('{"title":"Custom Axis ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/custom-axis.md","filePath":"en-US/guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"en-US/guide/custom-axis.md"},E={id:"custom-axis-9-8-0",tabindex:"-1"};function g(c,s,o,y,F,u){const n=p("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("Custom Axis ")),e(n,null,{default:l(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#custom-axis-9-8-0","aria-label":'Permalink to "Custom Axis <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=k(`<p>Chart support custom axis, which can be achieved through the chart api <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> and <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a>.</p><h2 id="input-params-introduction" tabindex="-1">Input params introduction <a class="header-anchor" href="#input-params-introduction" aria-label="Permalink to &quot;Input params introduction&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // axis name</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // implementation of create ticks</span></span>

View File

@ -1,4 +1,4 @@
import{_ as s,c as i,a2 as e,o as n}from"./chunks/framework.Bh2a4ahF.js";const c=JSON.parse('{"title":"📚 Data","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/data-source.md","filePath":"en-US/guide/data-source.md","lastUpdated":1713540760000}'),t={name:"en-US/guide/data-source.md"};function p(l,a,h,r,d,k){return n(),i("div",null,a[0]||(a[0]=[e(`<h1 id="📚-data" tabindex="-1">📚 Data <a class="header-anchor" href="#📚-data" aria-label="Permalink to &quot;📚 Data&quot;"></a></h1><p>The data required for the chart must be in a fixed format. Through the chart API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a>, <a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a> and <a href="./instance-api#updatedatadata">updateData(data)</a> to interact data with the chart.</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as s,c as i,a2 as e,o as n}from"./chunks/framework.Xx8dNX0P.js";const c=JSON.parse('{"title":"📚 Data","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/data-source.md","filePath":"en-US/guide/data-source.md","lastUpdated":1713540760000}'),t={name:"en-US/guide/data-source.md"};function p(l,a,h,r,d,k){return n(),i("div",null,a[0]||(a[0]=[e(`<h1 id="📚-data" tabindex="-1">📚 Data <a class="header-anchor" href="#📚-data" aria-label="Permalink to &quot;📚 Data&quot;"></a></h1><p>The data required for the chart must be in a fixed format. Through the chart API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a>, <a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a> and <a href="./instance-api#updatedatadata">updateData(data)</a> to interact data with the chart.</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Timestamp, millisecond, required fields</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> timestamp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Open price, required fields</span></span>

View File

@ -1,4 +1,4 @@
import{_ as s,c as i,a2 as e,o as n}from"./chunks/framework.Bh2a4ahF.js";const c=JSON.parse('{"title":"📚 Data","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/data-source.md","filePath":"en-US/guide/data-source.md","lastUpdated":1713540760000}'),t={name:"en-US/guide/data-source.md"};function p(l,a,h,r,d,k){return n(),i("div",null,a[0]||(a[0]=[e(`<h1 id="📚-data" tabindex="-1">📚 Data <a class="header-anchor" href="#📚-data" aria-label="Permalink to &quot;📚 Data&quot;"></a></h1><p>The data required for the chart must be in a fixed format. Through the chart API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a>, <a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a> and <a href="./instance-api#updatedatadata">updateData(data)</a> to interact data with the chart.</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as s,c as i,a2 as e,o as n}from"./chunks/framework.Xx8dNX0P.js";const c=JSON.parse('{"title":"📚 Data","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/data-source.md","filePath":"en-US/guide/data-source.md","lastUpdated":1713540760000}'),t={name:"en-US/guide/data-source.md"};function p(l,a,h,r,d,k){return n(),i("div",null,a[0]||(a[0]=[e(`<h1 id="📚-data" tabindex="-1">📚 Data <a class="header-anchor" href="#📚-data" aria-label="Permalink to &quot;📚 Data&quot;"></a></h1><p>The data required for the chart must be in a fixed format. Through the chart API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a>, <a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a> and <a href="./instance-api#updatedatadata">updateData(data)</a> to interact data with the chart.</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Timestamp, millisecond, required fields</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> timestamp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Open price, required fields</span></span>

View File

@ -1,4 +1,4 @@
import{_ as a,c as i,a2 as t,o as e}from"./chunks/framework.Bh2a4ahF.js";const c=JSON.parse('{"title":"🏝️ Environment","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/environment.md","filePath":"en-US/guide/environment.md","lastUpdated":1679066795000}'),n={name:"en-US/guide/environment.md"};function r(l,s,o,h,p,d){return e(),i("div",null,s[0]||(s[0]=[t(`<h1 id="🏝️-environment" tabindex="-1">🏝️ Environment <a class="header-anchor" href="#🏝️-environment" aria-label="Permalink to &quot;🏝️ Environment&quot;"></a></h1><h2 id="browser-support" tabindex="-1">Browser support <a class="header-anchor" href="#browser-support" aria-label="Permalink to &quot;Browser support&quot;"></a></h2><p>The chart is built based on html5 canvas and needs to run on a browser that supports canvas. If it needs to run on the mobile terminal, please use webview to load it.</p><h2 id="polyfill" tabindex="-1">Polyfill <a class="header-anchor" href="#polyfill" aria-label="Permalink to &quot;Polyfill&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>The internal collection of the chart uses <code>Map</code> for compatibility with unsupported older browsers.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
import{_ as a,c as i,a2 as t,o as e}from"./chunks/framework.Xx8dNX0P.js";const c=JSON.parse('{"title":"🏝️ Environment","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/environment.md","filePath":"en-US/guide/environment.md","lastUpdated":1679066795000}'),n={name:"en-US/guide/environment.md"};function r(l,s,o,h,p,d){return e(),i("div",null,s[0]||(s[0]=[t(`<h1 id="🏝️-environment" tabindex="-1">🏝️ Environment <a class="header-anchor" href="#🏝️-environment" aria-label="Permalink to &quot;🏝️ Environment&quot;"></a></h1><h2 id="browser-support" tabindex="-1">Browser support <a class="header-anchor" href="#browser-support" aria-label="Permalink to &quot;Browser support&quot;"></a></h2><p>The chart is built based on html5 canvas and needs to run on a browser that supports canvas. If it needs to run on the mobile terminal, please use webview to load it.</p><h2 id="polyfill" tabindex="-1">Polyfill <a class="header-anchor" href="#polyfill" aria-label="Permalink to &quot;Polyfill&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>The internal collection of the chart uses <code>Map</code> for compatibility with unsupported older browsers.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="intl-js" tabindex="-1"><a href="https://github.com/andyearnshaw/Intl.js" target="_blank" rel="noreferrer">Intl.js</a> <a class="header-anchor" href="#intl-js" aria-label="Permalink to &quot;[Intl.js](https://github.com/andyearnshaw/Intl.js)&quot;"></a></h3><p>Charts rely on <code>Intl</code>, some browsers do not have this API.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl/local-data/jsonp/en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div>`,10)]))}const u=a(n,[["render",r]]);export{c as __pageData,u as default};

View File

@ -1,4 +1,4 @@
import{_ as a,c as i,a2 as t,o as e}from"./chunks/framework.Bh2a4ahF.js";const c=JSON.parse('{"title":"🏝️ Environment","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/environment.md","filePath":"en-US/guide/environment.md","lastUpdated":1679066795000}'),n={name:"en-US/guide/environment.md"};function r(l,s,o,h,p,d){return e(),i("div",null,s[0]||(s[0]=[t(`<h1 id="🏝️-environment" tabindex="-1">🏝️ Environment <a class="header-anchor" href="#🏝️-environment" aria-label="Permalink to &quot;🏝️ Environment&quot;"></a></h1><h2 id="browser-support" tabindex="-1">Browser support <a class="header-anchor" href="#browser-support" aria-label="Permalink to &quot;Browser support&quot;"></a></h2><p>The chart is built based on html5 canvas and needs to run on a browser that supports canvas. If it needs to run on the mobile terminal, please use webview to load it.</p><h2 id="polyfill" tabindex="-1">Polyfill <a class="header-anchor" href="#polyfill" aria-label="Permalink to &quot;Polyfill&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>The internal collection of the chart uses <code>Map</code> for compatibility with unsupported older browsers.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
import{_ as a,c as i,a2 as t,o as e}from"./chunks/framework.Xx8dNX0P.js";const c=JSON.parse('{"title":"🏝️ Environment","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/environment.md","filePath":"en-US/guide/environment.md","lastUpdated":1679066795000}'),n={name:"en-US/guide/environment.md"};function r(l,s,o,h,p,d){return e(),i("div",null,s[0]||(s[0]=[t(`<h1 id="🏝️-environment" tabindex="-1">🏝️ Environment <a class="header-anchor" href="#🏝️-environment" aria-label="Permalink to &quot;🏝️ Environment&quot;"></a></h1><h2 id="browser-support" tabindex="-1">Browser support <a class="header-anchor" href="#browser-support" aria-label="Permalink to &quot;Browser support&quot;"></a></h2><p>The chart is built based on html5 canvas and needs to run on a browser that supports canvas. If it needs to run on the mobile terminal, please use webview to load it.</p><h2 id="polyfill" tabindex="-1">Polyfill <a class="header-anchor" href="#polyfill" aria-label="Permalink to &quot;Polyfill&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>The internal collection of the chart uses <code>Map</code> for compatibility with unsupported older browsers.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="intl-js" tabindex="-1"><a href="https://github.com/andyearnshaw/Intl.js" target="_blank" rel="noreferrer">Intl.js</a> <a class="header-anchor" href="#intl-js" aria-label="Permalink to &quot;[Intl.js](https://github.com/andyearnshaw/Intl.js)&quot;"></a></h3><p>Charts rely on <code>Intl</code>, some browsers do not have this API.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl/local-data/jsonp/en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div>`,10)]))}const u=a(n,[["render",r]]);export{c as __pageData,u as default};

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Figure","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/figure.md","filePath":"en-US/guide/figure.md","lastUpdated":1692476796000}'),h={name:"en-US/guide/figure.md"};function t(p,s,k,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="figure" tabindex="-1">Figure <a class="header-anchor" href="#figure" aria-label="Permalink to &quot;Figure&quot;"></a></h1><p>Figure are an important part of the chart. All elements on the chart are composed of figures. If you need to make complex custom technical indicators and overlays, it is recommended to read carefully. This document describes the built-in figures and how to customize a figure. The basic figure can be obtained through the chart method <code>klinecharts.getFigureClass(name)</code>.</p><h2 id="example-of-use" tabindex="-1">Example of use <a class="header-anchor" href="#example-of-use" aria-label="Permalink to &quot;Example of use&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">Note</p><p>It needs to be used when there is a canvas context.</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get the figure class</span></span>
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Figure","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/figure.md","filePath":"en-US/guide/figure.md","lastUpdated":1692476796000}'),h={name:"en-US/guide/figure.md"};function t(p,s,k,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="figure" tabindex="-1">Figure <a class="header-anchor" href="#figure" aria-label="Permalink to &quot;Figure&quot;"></a></h1><p>Figure are an important part of the chart. All elements on the chart are composed of figures. If you need to make complex custom technical indicators and overlays, it is recommended to read carefully. This document describes the built-in figures and how to customize a figure. The basic figure can be obtained through the chart method <code>klinecharts.getFigureClass(name)</code>.</p><h2 id="example-of-use" tabindex="-1">Example of use <a class="header-anchor" href="#example-of-use" aria-label="Permalink to &quot;Example of use&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">Note</p><p>It needs to be used when there is a canvas context.</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get the figure class</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// name is the name of the figure, such as &#39;arc&#39;, &#39;circle&#39;, etc.</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Figure</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getFigureClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// instantiate and draw</span></span>

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Figure","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/figure.md","filePath":"en-US/guide/figure.md","lastUpdated":1692476796000}'),h={name:"en-US/guide/figure.md"};function t(p,s,k,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="figure" tabindex="-1">Figure <a class="header-anchor" href="#figure" aria-label="Permalink to &quot;Figure&quot;"></a></h1><p>Figure are an important part of the chart. All elements on the chart are composed of figures. If you need to make complex custom technical indicators and overlays, it is recommended to read carefully. This document describes the built-in figures and how to customize a figure. The basic figure can be obtained through the chart method <code>klinecharts.getFigureClass(name)</code>.</p><h2 id="example-of-use" tabindex="-1">Example of use <a class="header-anchor" href="#example-of-use" aria-label="Permalink to &quot;Example of use&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">Note</p><p>It needs to be used when there is a canvas context.</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get the figure class</span></span>
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Figure","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/figure.md","filePath":"en-US/guide/figure.md","lastUpdated":1692476796000}'),h={name:"en-US/guide/figure.md"};function t(p,s,k,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="figure" tabindex="-1">Figure <a class="header-anchor" href="#figure" aria-label="Permalink to &quot;Figure&quot;"></a></h1><p>Figure are an important part of the chart. All elements on the chart are composed of figures. If you need to make complex custom technical indicators and overlays, it is recommended to read carefully. This document describes the built-in figures and how to customize a figure. The basic figure can be obtained through the chart method <code>klinecharts.getFigureClass(name)</code>.</p><h2 id="example-of-use" tabindex="-1">Example of use <a class="header-anchor" href="#example-of-use" aria-label="Permalink to &quot;Example of use&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">Note</p><p>It needs to be used when there is a canvas context.</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get the figure class</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// name is the name of the figure, such as &#39;arc&#39;, &#39;circle&#39;, etc.</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Figure</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getFigureClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// instantiate and draw</span></span>

View File

@ -1 +1 @@
import{_ as o,c as t,a2 as d,o as a}from"./chunks/framework.Bh2a4ahF.js";const p=JSON.parse('{"title":"⌨️ Hot Key","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/hot-key.md","filePath":"en-US/guide/hot-key.md","lastUpdated":1679066795000}'),i={name:"en-US/guide/hot-key.md"};function c(n,e,r,l,s,h){return a(),t("div",null,e[0]||(e[0]=[d('<h1 id="⌨️-hot-key" tabindex="-1">⌨️ Hot Key <a class="header-anchor" href="#⌨️-hot-key" aria-label="Permalink to &quot;⌨️ Hot Key&quot;"></a></h1><p>Currently only supports moving and zooming.</p><ul><li><code>shift</code> + <code>→</code> move right</li><li><code>shift</code> + <code>←</code> move left</li><li><code>shift</code> + <code>+</code> zoom in</li><li><code>shift</code> + <code>-</code> zoom out</li></ul>',3)]))}const u=o(i,[["render",c]]);export{p as __pageData,u as default};
import{_ as o,c as t,a2 as d,o as a}from"./chunks/framework.Xx8dNX0P.js";const p=JSON.parse('{"title":"⌨️ Hot Key","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/hot-key.md","filePath":"en-US/guide/hot-key.md","lastUpdated":1679066795000}'),i={name:"en-US/guide/hot-key.md"};function c(n,e,r,l,s,h){return a(),t("div",null,e[0]||(e[0]=[d('<h1 id="⌨️-hot-key" tabindex="-1">⌨️ Hot Key <a class="header-anchor" href="#⌨️-hot-key" aria-label="Permalink to &quot;⌨️ Hot Key&quot;"></a></h1><p>Currently only supports moving and zooming.</p><ul><li><code>shift</code> + <code>→</code> move right</li><li><code>shift</code> + <code>←</code> move left</li><li><code>shift</code> + <code>+</code> zoom in</li><li><code>shift</code> + <code>-</code> zoom out</li></ul>',3)]))}const u=o(i,[["render",c]]);export{p as __pageData,u as default};

View File

@ -1 +1 @@
import{_ as o,c as t,a2 as d,o as a}from"./chunks/framework.Bh2a4ahF.js";const p=JSON.parse('{"title":"⌨️ Hot Key","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/hot-key.md","filePath":"en-US/guide/hot-key.md","lastUpdated":1679066795000}'),i={name:"en-US/guide/hot-key.md"};function c(n,e,r,l,s,h){return a(),t("div",null,e[0]||(e[0]=[d('<h1 id="⌨️-hot-key" tabindex="-1">⌨️ Hot Key <a class="header-anchor" href="#⌨️-hot-key" aria-label="Permalink to &quot;⌨️ Hot Key&quot;"></a></h1><p>Currently only supports moving and zooming.</p><ul><li><code>shift</code> + <code>→</code> move right</li><li><code>shift</code> + <code>←</code> move left</li><li><code>shift</code> + <code>+</code> zoom in</li><li><code>shift</code> + <code>-</code> zoom out</li></ul>',3)]))}const u=o(i,[["render",c]]);export{p as __pageData,u as default};
import{_ as o,c as t,a2 as d,o as a}from"./chunks/framework.Xx8dNX0P.js";const p=JSON.parse('{"title":"⌨️ Hot Key","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/hot-key.md","filePath":"en-US/guide/hot-key.md","lastUpdated":1679066795000}'),i={name:"en-US/guide/hot-key.md"};function c(n,e,r,l,s,h){return a(),t("div",null,e[0]||(e[0]=[d('<h1 id="⌨️-hot-key" tabindex="-1">⌨️ Hot Key <a class="header-anchor" href="#⌨️-hot-key" aria-label="Permalink to &quot;⌨️ Hot Key&quot;"></a></h1><p>Currently only supports moving and zooming.</p><ul><li><code>shift</code> + <code>→</code> move right</li><li><code>shift</code> + <code>←</code> move left</li><li><code>shift</code> + <code>+</code> zoom in</li><li><code>shift</code> + <code>-</code> zoom out</li></ul>',3)]))}const u=o(i,[["render",c]]);export{p as __pageData,u as default};

View File

@ -1,4 +1,4 @@
import{_ as s,c as i,a2 as n,o as e}from"./chunks/framework.Bh2a4ahF.js";const E=JSON.parse('{"title":"🌏 Internationalization","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/i18n.md","filePath":"en-US/guide/i18n.md","lastUpdated":1699374419000}'),t={name:"en-US/guide/i18n.md"};function l(h,a,p,k,d,r){return e(),i("div",null,a[0]||(a[0]=[n(`<h1 id="🌏-internationalization" tabindex="-1">🌏 Internationalization <a class="header-anchor" href="#🌏-internationalization" aria-label="Permalink to &quot;🌏 Internationalization&quot;"></a></h1><p>Currently, the chart has two built-in <code>en-US</code> and <code>zh-CN</code>. The default language is <code>en-US</code>. If you need to use other languages, you can refer to the following scheme.</p><h2 id="adding-new-language" tabindex="-1">Adding new language <a class="header-anchor" href="#adding-new-language" aria-label="Permalink to &quot;Adding new language&quot;"></a></h2><p>Adding new language is accomplished through <code>klinecharts.registerLocale(key, locales)</code>.</p><p>For example, to add traditional Chinese language, you can do this,</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;zh-HK&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
import{_ as s,c as i,a2 as n,o as e}from"./chunks/framework.Xx8dNX0P.js";const E=JSON.parse('{"title":"🌏 Internationalization","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/i18n.md","filePath":"en-US/guide/i18n.md","lastUpdated":1699374419000}'),t={name:"en-US/guide/i18n.md"};function l(h,a,p,k,d,r){return e(),i("div",null,a[0]||(a[0]=[n(`<h1 id="🌏-internationalization" tabindex="-1">🌏 Internationalization <a class="header-anchor" href="#🌏-internationalization" aria-label="Permalink to &quot;🌏 Internationalization&quot;"></a></h1><p>Currently, the chart has two built-in <code>en-US</code> and <code>zh-CN</code>. The default language is <code>en-US</code>. If you need to use other languages, you can refer to the following scheme.</p><h2 id="adding-new-language" tabindex="-1">Adding new language <a class="header-anchor" href="#adding-new-language" aria-label="Permalink to &quot;Adding new language&quot;"></a></h2><p>Adding new language is accomplished through <code>klinecharts.registerLocale(key, locales)</code>.</p><p>For example, to add traditional Chinese language, you can do this,</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;zh-HK&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> time: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> open: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> high: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>

View File

@ -1,4 +1,4 @@
import{_ as s,c as i,a2 as n,o as e}from"./chunks/framework.Bh2a4ahF.js";const E=JSON.parse('{"title":"🌏 Internationalization","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/i18n.md","filePath":"en-US/guide/i18n.md","lastUpdated":1699374419000}'),t={name:"en-US/guide/i18n.md"};function l(h,a,p,k,d,r){return e(),i("div",null,a[0]||(a[0]=[n(`<h1 id="🌏-internationalization" tabindex="-1">🌏 Internationalization <a class="header-anchor" href="#🌏-internationalization" aria-label="Permalink to &quot;🌏 Internationalization&quot;"></a></h1><p>Currently, the chart has two built-in <code>en-US</code> and <code>zh-CN</code>. The default language is <code>en-US</code>. If you need to use other languages, you can refer to the following scheme.</p><h2 id="adding-new-language" tabindex="-1">Adding new language <a class="header-anchor" href="#adding-new-language" aria-label="Permalink to &quot;Adding new language&quot;"></a></h2><p>Adding new language is accomplished through <code>klinecharts.registerLocale(key, locales)</code>.</p><p>For example, to add traditional Chinese language, you can do this,</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;zh-HK&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
import{_ as s,c as i,a2 as n,o as e}from"./chunks/framework.Xx8dNX0P.js";const E=JSON.parse('{"title":"🌏 Internationalization","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/i18n.md","filePath":"en-US/guide/i18n.md","lastUpdated":1699374419000}'),t={name:"en-US/guide/i18n.md"};function l(h,a,p,k,d,r){return e(),i("div",null,a[0]||(a[0]=[n(`<h1 id="🌏-internationalization" tabindex="-1">🌏 Internationalization <a class="header-anchor" href="#🌏-internationalization" aria-label="Permalink to &quot;🌏 Internationalization&quot;"></a></h1><p>Currently, the chart has two built-in <code>en-US</code> and <code>zh-CN</code>. The default language is <code>en-US</code>. If you need to use other languages, you can refer to the following scheme.</p><h2 id="adding-new-language" tabindex="-1">Adding new language <a class="header-anchor" href="#adding-new-language" aria-label="Permalink to &quot;Adding new language&quot;"></a></h2><p>Adding new language is accomplished through <code>klinecharts.registerLocale(key, locales)</code>.</p><p>For example, to add traditional Chinese language, you can do this,</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;zh-HK&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> time: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> open: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> high: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as t}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Technical indicator","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/indicator.md","filePath":"en-US/guide/indicator.md","lastUpdated":1724666019000}'),l={name:"en-US/guide/indicator.md"};function h(k,s,p,e,r,d){return t(),a("div",null,s[0]||(s[0]=[n(`<h1 id="technical-indicator" tabindex="-1">Technical indicator <a class="header-anchor" href="#technical-indicator" aria-label="Permalink to &quot;Technical indicator&quot;"></a></h1><p>This document introduces the built-in technical indicators in the chart and how to customize a technical indicator.</p><h2 id="built-in-technical-indicators" tabindex="-1">Built-in technical indicators <a class="header-anchor" href="#built-in-technical-indicators" aria-label="Permalink to &quot;Built-in technical indicators&quot;"></a></h2><table tabindex="0"><thead><tr><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th></tr></thead><tbody><tr><td style="text-align:center;">MA</td><td style="text-align:center;">[5, 10, 30, 60]</td><td style="text-align:center;">BIAS</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">VR</td><td style="text-align:center;">[24, 30]</td></tr><tr><td style="text-align:center;">EMA</td><td style="text-align:center;">[6, 12, 20]</td><td style="text-align:center;">BRAR</td><td style="text-align:center;">[26]</td><td style="text-align:center;">WR</td><td style="text-align:center;">[6, 10, 14]</td></tr><tr><td style="text-align:center;">SMA</td><td style="text-align:center;">[12, 2]</td><td style="text-align:center;">CCI</td><td style="text-align:center;">[13]</td><td style="text-align:center;">MTM</td><td style="text-align:center;">[6, 10]</td></tr><tr><td style="text-align:center;">BBI</td><td style="text-align:center;">[3, 6, 12, 24]</td><td style="text-align:center;">DMI</td><td style="text-align:center;">[14, 6]</td><td style="text-align:center;">EMV</td><td style="text-align:center;">[14, 9]</td></tr><tr><td style="text-align:center;">VOL</td><td style="text-align:center;">[5, 10, 20]</td><td style="text-align:center;">CR</td><td style="text-align:center;">[26, 10, 20, 40, 60]</td><td style="text-align:center;">SAR</td><td style="text-align:center;">[2, 2, 20]</td></tr><tr><td style="text-align:center;">MACD</td><td style="text-align:center;">[12, 26, 9]</td><td style="text-align:center;">PSY</td><td style="text-align:center;">[12, 6]</td><td style="text-align:center;">AO</td><td style="text-align:center;">[5, 34]</td></tr><tr><td style="text-align:center;">BOLL</td><td style="text-align:center;">[20, 2]</td><td style="text-align:center;">DMA</td><td style="text-align:center;">[10, 50, 10]</td><td style="text-align:center;">ROC</td><td style="text-align:center;">[12, 6]</td></tr><tr><td style="text-align:center;">KDJ</td><td style="text-align:center;">[9, 3, 3]</td><td style="text-align:center;">TRIX</td><td style="text-align:center;">[12, 20]</td><td style="text-align:center;">PVT</td><td style="text-align:center;">None</td></tr><tr><td style="text-align:center;">RSI</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">OBV</td><td style="text-align:center;">[30]</td><td style="text-align:center;">AVP</td><td style="text-align:center;">None</td></tr></tbody></table><h2 id="custom-technical-indicators" tabindex="-1">Custom Technical Indicators <a class="header-anchor" href="#custom-technical-indicators" aria-label="Permalink to &quot;Custom Technical Indicators&quot;"></a></h2><p>To create a custom technical indicator, you only need to generate a technical indicator information, and then add it globally through <code>klinecharts.registerIndicator</code>, add it to the chart and use it like the built-in technical indicator.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as i,c as a,a2 as n,o as t}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Technical indicator","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/indicator.md","filePath":"en-US/guide/indicator.md","lastUpdated":1724666019000}'),l={name:"en-US/guide/indicator.md"};function h(k,s,p,e,r,d){return t(),a("div",null,s[0]||(s[0]=[n(`<h1 id="technical-indicator" tabindex="-1">Technical indicator <a class="header-anchor" href="#technical-indicator" aria-label="Permalink to &quot;Technical indicator&quot;"></a></h1><p>This document introduces the built-in technical indicators in the chart and how to customize a technical indicator.</p><h2 id="built-in-technical-indicators" tabindex="-1">Built-in technical indicators <a class="header-anchor" href="#built-in-technical-indicators" aria-label="Permalink to &quot;Built-in technical indicators&quot;"></a></h2><table tabindex="0"><thead><tr><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th></tr></thead><tbody><tr><td style="text-align:center;">MA</td><td style="text-align:center;">[5, 10, 30, 60]</td><td style="text-align:center;">BIAS</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">VR</td><td style="text-align:center;">[24, 30]</td></tr><tr><td style="text-align:center;">EMA</td><td style="text-align:center;">[6, 12, 20]</td><td style="text-align:center;">BRAR</td><td style="text-align:center;">[26]</td><td style="text-align:center;">WR</td><td style="text-align:center;">[6, 10, 14]</td></tr><tr><td style="text-align:center;">SMA</td><td style="text-align:center;">[12, 2]</td><td style="text-align:center;">CCI</td><td style="text-align:center;">[13]</td><td style="text-align:center;">MTM</td><td style="text-align:center;">[6, 10]</td></tr><tr><td style="text-align:center;">BBI</td><td style="text-align:center;">[3, 6, 12, 24]</td><td style="text-align:center;">DMI</td><td style="text-align:center;">[14, 6]</td><td style="text-align:center;">EMV</td><td style="text-align:center;">[14, 9]</td></tr><tr><td style="text-align:center;">VOL</td><td style="text-align:center;">[5, 10, 20]</td><td style="text-align:center;">CR</td><td style="text-align:center;">[26, 10, 20, 40, 60]</td><td style="text-align:center;">SAR</td><td style="text-align:center;">[2, 2, 20]</td></tr><tr><td style="text-align:center;">MACD</td><td style="text-align:center;">[12, 26, 9]</td><td style="text-align:center;">PSY</td><td style="text-align:center;">[12, 6]</td><td style="text-align:center;">AO</td><td style="text-align:center;">[5, 34]</td></tr><tr><td style="text-align:center;">BOLL</td><td style="text-align:center;">[20, 2]</td><td style="text-align:center;">DMA</td><td style="text-align:center;">[10, 50, 10]</td><td style="text-align:center;">ROC</td><td style="text-align:center;">[12, 6]</td></tr><tr><td style="text-align:center;">KDJ</td><td style="text-align:center;">[9, 3, 3]</td><td style="text-align:center;">TRIX</td><td style="text-align:center;">[12, 20]</td><td style="text-align:center;">PVT</td><td style="text-align:center;">None</td></tr><tr><td style="text-align:center;">RSI</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">OBV</td><td style="text-align:center;">[30]</td><td style="text-align:center;">AVP</td><td style="text-align:center;">None</td></tr></tbody></table><h2 id="custom-technical-indicators" tabindex="-1">Custom Technical Indicators <a class="header-anchor" href="#custom-technical-indicators" aria-label="Permalink to &quot;Custom Technical Indicators&quot;"></a></h2><p>To create a custom technical indicator, you only need to generate a technical indicator information, and then add it globally through <code>klinecharts.registerIndicator</code>, add it to the chart and use it like the built-in technical indicator.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // indicator name</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The short name of the indicator, used for display, the name will be displayed by default</span></span>

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as t}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Technical indicator","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/indicator.md","filePath":"en-US/guide/indicator.md","lastUpdated":1724666019000}'),l={name:"en-US/guide/indicator.md"};function h(k,s,p,e,r,d){return t(),a("div",null,s[0]||(s[0]=[n(`<h1 id="technical-indicator" tabindex="-1">Technical indicator <a class="header-anchor" href="#technical-indicator" aria-label="Permalink to &quot;Technical indicator&quot;"></a></h1><p>This document introduces the built-in technical indicators in the chart and how to customize a technical indicator.</p><h2 id="built-in-technical-indicators" tabindex="-1">Built-in technical indicators <a class="header-anchor" href="#built-in-technical-indicators" aria-label="Permalink to &quot;Built-in technical indicators&quot;"></a></h2><table tabindex="0"><thead><tr><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th></tr></thead><tbody><tr><td style="text-align:center;">MA</td><td style="text-align:center;">[5, 10, 30, 60]</td><td style="text-align:center;">BIAS</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">VR</td><td style="text-align:center;">[24, 30]</td></tr><tr><td style="text-align:center;">EMA</td><td style="text-align:center;">[6, 12, 20]</td><td style="text-align:center;">BRAR</td><td style="text-align:center;">[26]</td><td style="text-align:center;">WR</td><td style="text-align:center;">[6, 10, 14]</td></tr><tr><td style="text-align:center;">SMA</td><td style="text-align:center;">[12, 2]</td><td style="text-align:center;">CCI</td><td style="text-align:center;">[13]</td><td style="text-align:center;">MTM</td><td style="text-align:center;">[6, 10]</td></tr><tr><td style="text-align:center;">BBI</td><td style="text-align:center;">[3, 6, 12, 24]</td><td style="text-align:center;">DMI</td><td style="text-align:center;">[14, 6]</td><td style="text-align:center;">EMV</td><td style="text-align:center;">[14, 9]</td></tr><tr><td style="text-align:center;">VOL</td><td style="text-align:center;">[5, 10, 20]</td><td style="text-align:center;">CR</td><td style="text-align:center;">[26, 10, 20, 40, 60]</td><td style="text-align:center;">SAR</td><td style="text-align:center;">[2, 2, 20]</td></tr><tr><td style="text-align:center;">MACD</td><td style="text-align:center;">[12, 26, 9]</td><td style="text-align:center;">PSY</td><td style="text-align:center;">[12, 6]</td><td style="text-align:center;">AO</td><td style="text-align:center;">[5, 34]</td></tr><tr><td style="text-align:center;">BOLL</td><td style="text-align:center;">[20, 2]</td><td style="text-align:center;">DMA</td><td style="text-align:center;">[10, 50, 10]</td><td style="text-align:center;">ROC</td><td style="text-align:center;">[12, 6]</td></tr><tr><td style="text-align:center;">KDJ</td><td style="text-align:center;">[9, 3, 3]</td><td style="text-align:center;">TRIX</td><td style="text-align:center;">[12, 20]</td><td style="text-align:center;">PVT</td><td style="text-align:center;">None</td></tr><tr><td style="text-align:center;">RSI</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">OBV</td><td style="text-align:center;">[30]</td><td style="text-align:center;">AVP</td><td style="text-align:center;">None</td></tr></tbody></table><h2 id="custom-technical-indicators" tabindex="-1">Custom Technical Indicators <a class="header-anchor" href="#custom-technical-indicators" aria-label="Permalink to &quot;Custom Technical Indicators&quot;"></a></h2><p>To create a custom technical indicator, you only need to generate a technical indicator information, and then add it globally through <code>klinecharts.registerIndicator</code>, add it to the chart and use it like the built-in technical indicator.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as i,c as a,a2 as n,o as t}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Technical indicator","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/indicator.md","filePath":"en-US/guide/indicator.md","lastUpdated":1724666019000}'),l={name:"en-US/guide/indicator.md"};function h(k,s,p,e,r,d){return t(),a("div",null,s[0]||(s[0]=[n(`<h1 id="technical-indicator" tabindex="-1">Technical indicator <a class="header-anchor" href="#technical-indicator" aria-label="Permalink to &quot;Technical indicator&quot;"></a></h1><p>This document introduces the built-in technical indicators in the chart and how to customize a technical indicator.</p><h2 id="built-in-technical-indicators" tabindex="-1">Built-in technical indicators <a class="header-anchor" href="#built-in-technical-indicators" aria-label="Permalink to &quot;Built-in technical indicators&quot;"></a></h2><table tabindex="0"><thead><tr><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th><th style="text-align:center;"><strong>Name</strong></th><th style="text-align:center;"><strong>Default calc params</strong></th></tr></thead><tbody><tr><td style="text-align:center;">MA</td><td style="text-align:center;">[5, 10, 30, 60]</td><td style="text-align:center;">BIAS</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">VR</td><td style="text-align:center;">[24, 30]</td></tr><tr><td style="text-align:center;">EMA</td><td style="text-align:center;">[6, 12, 20]</td><td style="text-align:center;">BRAR</td><td style="text-align:center;">[26]</td><td style="text-align:center;">WR</td><td style="text-align:center;">[6, 10, 14]</td></tr><tr><td style="text-align:center;">SMA</td><td style="text-align:center;">[12, 2]</td><td style="text-align:center;">CCI</td><td style="text-align:center;">[13]</td><td style="text-align:center;">MTM</td><td style="text-align:center;">[6, 10]</td></tr><tr><td style="text-align:center;">BBI</td><td style="text-align:center;">[3, 6, 12, 24]</td><td style="text-align:center;">DMI</td><td style="text-align:center;">[14, 6]</td><td style="text-align:center;">EMV</td><td style="text-align:center;">[14, 9]</td></tr><tr><td style="text-align:center;">VOL</td><td style="text-align:center;">[5, 10, 20]</td><td style="text-align:center;">CR</td><td style="text-align:center;">[26, 10, 20, 40, 60]</td><td style="text-align:center;">SAR</td><td style="text-align:center;">[2, 2, 20]</td></tr><tr><td style="text-align:center;">MACD</td><td style="text-align:center;">[12, 26, 9]</td><td style="text-align:center;">PSY</td><td style="text-align:center;">[12, 6]</td><td style="text-align:center;">AO</td><td style="text-align:center;">[5, 34]</td></tr><tr><td style="text-align:center;">BOLL</td><td style="text-align:center;">[20, 2]</td><td style="text-align:center;">DMA</td><td style="text-align:center;">[10, 50, 10]</td><td style="text-align:center;">ROC</td><td style="text-align:center;">[12, 6]</td></tr><tr><td style="text-align:center;">KDJ</td><td style="text-align:center;">[9, 3, 3]</td><td style="text-align:center;">TRIX</td><td style="text-align:center;">[12, 20]</td><td style="text-align:center;">PVT</td><td style="text-align:center;">None</td></tr><tr><td style="text-align:center;">RSI</td><td style="text-align:center;">[6, 12, 24]</td><td style="text-align:center;">OBV</td><td style="text-align:center;">[30]</td><td style="text-align:center;">AVP</td><td style="text-align:center;">None</td></tr></tbody></table><h2 id="custom-technical-indicators" tabindex="-1">Custom Technical Indicators <a class="header-anchor" href="#custom-technical-indicators" aria-label="Permalink to &quot;Custom Technical Indicators&quot;"></a></h2><p>To create a custom technical indicator, you only need to generate a technical indicator information, and then add it globally through <code>klinecharts.registerIndicator</code>, add it to the chart and use it like the built-in technical indicator.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // indicator name</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // The short name of the indicator, used for display, the name will be displayed by default</span></span>

View File

@ -1,4 +1,4 @@
import{_ as k,B as e,c as p,a2 as n,j as i,a,G as t,w as h,o as E}from"./chunks/framework.Bh2a4ahF.js";const B=JSON.parse('{"title":"Instance API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/instance-api.md","filePath":"en-US/guide/instance-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/instance-api.md"},r={id:"getoffsetrightdistance-9-2-0",tabindex:"-1"},g={id:"setmaxoffsetleftdistance-9-7-0",tabindex:"-1"},y={id:"setmaxoffsetrightdistance-9-7-0",tabindex:"-1"},o={id:"setloaddatacallback-cb-9-8-0",tabindex:"-1"},c={id:"executeaction-type-data-9-2-0",tabindex:"-1"};function F(u,s,b,A,C,m){const l=e("Badge");return E(),p("div",null,[s[88]||(s[88]=n(`<h1 id="instance-api" tabindex="-1">Instance API <a class="header-anchor" href="#instance-api" aria-label="Permalink to &quot;Instance API&quot;"></a></h1><h2 id="getdom-paneid-position" tabindex="-1">getDom(paneId, position) <a class="header-anchor" href="#getdom-paneid-position" aria-label="Permalink to &quot;getDom(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre></div><p>Get the dom container.</p><ul><li><code>paneId</code> window id, the default is the entire chart container</li><li><code>position</code> supports <code>root</code>, <code>main</code>, <code>yAxis</code>, the default is <code>root</code></li></ul><h2 id="getsize-paneid-position" tabindex="-1">getSize(paneId, position) <a class="header-anchor" href="#getsize-paneid-position" aria-label="Permalink to &quot;getSize(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as k,B as e,c as p,a2 as n,j as i,a,G as t,w as h,o as E}from"./chunks/framework.Xx8dNX0P.js";const B=JSON.parse('{"title":"Instance API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/instance-api.md","filePath":"en-US/guide/instance-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/instance-api.md"},r={id:"getoffsetrightdistance-9-2-0",tabindex:"-1"},g={id:"setmaxoffsetleftdistance-9-7-0",tabindex:"-1"},y={id:"setmaxoffsetrightdistance-9-7-0",tabindex:"-1"},o={id:"setloaddatacallback-cb-9-8-0",tabindex:"-1"},c={id:"executeaction-type-data-9-2-0",tabindex:"-1"};function F(u,s,b,A,C,m){const l=e("Badge");return E(),p("div",null,[s[88]||(s[88]=n(`<h1 id="instance-api" tabindex="-1">Instance API <a class="header-anchor" href="#instance-api" aria-label="Permalink to &quot;Instance API&quot;"></a></h1><h2 id="getdom-paneid-position" tabindex="-1">getDom(paneId, position) <a class="header-anchor" href="#getdom-paneid-position" aria-label="Permalink to &quot;getDom(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre></div><p>Get the dom container.</p><ul><li><code>paneId</code> window id, the default is the entire chart container</li><li><code>position</code> supports <code>root</code>, <code>main</code>, <code>yAxis</code>, the default is <code>root</code></li></ul><h2 id="getsize-paneid-position" tabindex="-1">getSize(paneId, position) <a class="header-anchor" href="#getsize-paneid-position" aria-label="Permalink to &quot;getSize(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>

View File

@ -1,4 +1,4 @@
import{_ as k,B as e,c as p,a2 as n,j as i,a,G as t,w as h,o as E}from"./chunks/framework.Bh2a4ahF.js";const B=JSON.parse('{"title":"Instance API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/instance-api.md","filePath":"en-US/guide/instance-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/instance-api.md"},r={id:"getoffsetrightdistance-9-2-0",tabindex:"-1"},g={id:"setmaxoffsetleftdistance-9-7-0",tabindex:"-1"},y={id:"setmaxoffsetrightdistance-9-7-0",tabindex:"-1"},o={id:"setloaddatacallback-cb-9-8-0",tabindex:"-1"},c={id:"executeaction-type-data-9-2-0",tabindex:"-1"};function F(u,s,b,A,C,m){const l=e("Badge");return E(),p("div",null,[s[88]||(s[88]=n(`<h1 id="instance-api" tabindex="-1">Instance API <a class="header-anchor" href="#instance-api" aria-label="Permalink to &quot;Instance API&quot;"></a></h1><h2 id="getdom-paneid-position" tabindex="-1">getDom(paneId, position) <a class="header-anchor" href="#getdom-paneid-position" aria-label="Permalink to &quot;getDom(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre></div><p>Get the dom container.</p><ul><li><code>paneId</code> window id, the default is the entire chart container</li><li><code>position</code> supports <code>root</code>, <code>main</code>, <code>yAxis</code>, the default is <code>root</code></li></ul><h2 id="getsize-paneid-position" tabindex="-1">getSize(paneId, position) <a class="header-anchor" href="#getsize-paneid-position" aria-label="Permalink to &quot;getSize(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
import{_ as k,B as e,c as p,a2 as n,j as i,a,G as t,w as h,o as E}from"./chunks/framework.Xx8dNX0P.js";const B=JSON.parse('{"title":"Instance API","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/instance-api.md","filePath":"en-US/guide/instance-api.md","lastUpdated":1717605084000}'),d={name:"en-US/guide/instance-api.md"},r={id:"getoffsetrightdistance-9-2-0",tabindex:"-1"},g={id:"setmaxoffsetleftdistance-9-7-0",tabindex:"-1"},y={id:"setmaxoffsetrightdistance-9-7-0",tabindex:"-1"},o={id:"setloaddatacallback-cb-9-8-0",tabindex:"-1"},c={id:"executeaction-type-data-9-2-0",tabindex:"-1"};function F(u,s,b,A,C,m){const l=e("Badge");return E(),p("div",null,[s[88]||(s[88]=n(`<h1 id="instance-api" tabindex="-1">Instance API <a class="header-anchor" href="#instance-api" aria-label="Permalink to &quot;Instance API&quot;"></a></h1><h2 id="getdom-paneid-position" tabindex="-1">getDom(paneId, position) <a class="header-anchor" href="#getdom-paneid-position" aria-label="Permalink to &quot;getDom(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre></div><p>Get the dom container.</p><ul><li><code>paneId</code> window id, the default is the entire chart container</li><li><code>position</code> supports <code>root</code>, <code>main</code>, <code>yAxis</code>, the default is <code>root</code></li></ul><h2 id="getsize-paneid-position" tabindex="-1">getSize(paneId, position) <a class="header-anchor" href="#getsize-paneid-position" aria-label="Permalink to &quot;getSize(paneId, position)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">paneId</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">position</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;root&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;main&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;yAxis&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>

View File

@ -1 +1 @@
import{_ as e,c as i,a2 as n,o as a}from"./chunks/framework.Bh2a4ahF.js";const p=JSON.parse('{"title":"📃 Introduction","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/introduction.md","filePath":"en-US/guide/introduction.md","lastUpdated":1712170888000}'),o={name:"en-US/guide/introduction.md"};function r(l,t,s,d,c,h){return a(),i("div",null,t[0]||(t[0]=[n('<h1 id="📃-introduction" tabindex="-1">📃 Introduction <a class="header-anchor" href="#📃-introduction" aria-label="Permalink to &quot;📃 Introduction&quot;"></a></h1><h2 id="what-s-klinechart" tabindex="-1">What&#39;s KLineChart? <a class="header-anchor" href="#what-s-klinechart" aria-label="Permalink to &quot;What&#39;s KLineChart?&quot;"></a></h2><p>KLineChartit is a highly customizable professional lightweight financial chart.</p><h2 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-label="Permalink to &quot;Features&quot;"></a></h2><ul><li>📦 <strong>Out of the box:</strong> Simple and fast integration, basically zero cost to get started.</li><li>🚀 <strong>Lightweight and smooth:</strong> Zero dependencies, only 40k under gzip compression.</li><li>💪 <strong>Powerful functions:</strong> Built-in multiple indicators and line drawing models.</li><li>🎨 <strong>Highly scalable:</strong> With rich style configuration and API, the function can be extended as you like.</li><li>📱 <strong>Mobile:</strong> Support mobile, one chart, handle multiple terminals.</li><li>🛡 <strong>Typescript development:</strong> Provide complete type definition files.</li></ul>',5)]))}const g=e(o,[["render",r]]);export{p as __pageData,g as default};
import{_ as e,c as i,a2 as n,o as a}from"./chunks/framework.Xx8dNX0P.js";const p=JSON.parse('{"title":"📃 Introduction","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/introduction.md","filePath":"en-US/guide/introduction.md","lastUpdated":1712170888000}'),o={name:"en-US/guide/introduction.md"};function r(l,t,s,d,c,h){return a(),i("div",null,t[0]||(t[0]=[n('<h1 id="📃-introduction" tabindex="-1">📃 Introduction <a class="header-anchor" href="#📃-introduction" aria-label="Permalink to &quot;📃 Introduction&quot;"></a></h1><h2 id="what-s-klinechart" tabindex="-1">What&#39;s KLineChart? <a class="header-anchor" href="#what-s-klinechart" aria-label="Permalink to &quot;What&#39;s KLineChart?&quot;"></a></h2><p>KLineChartit is a highly customizable professional lightweight financial chart.</p><h2 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-label="Permalink to &quot;Features&quot;"></a></h2><ul><li>📦 <strong>Out of the box:</strong> Simple and fast integration, basically zero cost to get started.</li><li>🚀 <strong>Lightweight and smooth:</strong> Zero dependencies, only 40k under gzip compression.</li><li>💪 <strong>Powerful functions:</strong> Built-in multiple indicators and line drawing models.</li><li>🎨 <strong>Highly scalable:</strong> With rich style configuration and API, the function can be extended as you like.</li><li>📱 <strong>Mobile:</strong> Support mobile, one chart, handle multiple terminals.</li><li>🛡 <strong>Typescript development:</strong> Provide complete type definition files.</li></ul>',5)]))}const g=e(o,[["render",r]]);export{p as __pageData,g as default};

View File

@ -1 +1 @@
import{_ as e,c as i,a2 as n,o as a}from"./chunks/framework.Bh2a4ahF.js";const p=JSON.parse('{"title":"📃 Introduction","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/introduction.md","filePath":"en-US/guide/introduction.md","lastUpdated":1712170888000}'),o={name:"en-US/guide/introduction.md"};function r(l,t,s,d,c,h){return a(),i("div",null,t[0]||(t[0]=[n('<h1 id="📃-introduction" tabindex="-1">📃 Introduction <a class="header-anchor" href="#📃-introduction" aria-label="Permalink to &quot;📃 Introduction&quot;"></a></h1><h2 id="what-s-klinechart" tabindex="-1">What&#39;s KLineChart? <a class="header-anchor" href="#what-s-klinechart" aria-label="Permalink to &quot;What&#39;s KLineChart?&quot;"></a></h2><p>KLineChartit is a highly customizable professional lightweight financial chart.</p><h2 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-label="Permalink to &quot;Features&quot;"></a></h2><ul><li>📦 <strong>Out of the box:</strong> Simple and fast integration, basically zero cost to get started.</li><li>🚀 <strong>Lightweight and smooth:</strong> Zero dependencies, only 40k under gzip compression.</li><li>💪 <strong>Powerful functions:</strong> Built-in multiple indicators and line drawing models.</li><li>🎨 <strong>Highly scalable:</strong> With rich style configuration and API, the function can be extended as you like.</li><li>📱 <strong>Mobile:</strong> Support mobile, one chart, handle multiple terminals.</li><li>🛡 <strong>Typescript development:</strong> Provide complete type definition files.</li></ul>',5)]))}const g=e(o,[["render",r]]);export{p as __pageData,g as default};
import{_ as e,c as i,a2 as n,o as a}from"./chunks/framework.Xx8dNX0P.js";const p=JSON.parse('{"title":"📃 Introduction","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/introduction.md","filePath":"en-US/guide/introduction.md","lastUpdated":1712170888000}'),o={name:"en-US/guide/introduction.md"};function r(l,t,s,d,c,h){return a(),i("div",null,t[0]||(t[0]=[n('<h1 id="📃-introduction" tabindex="-1">📃 Introduction <a class="header-anchor" href="#📃-introduction" aria-label="Permalink to &quot;📃 Introduction&quot;"></a></h1><h2 id="what-s-klinechart" tabindex="-1">What&#39;s KLineChart? <a class="header-anchor" href="#what-s-klinechart" aria-label="Permalink to &quot;What&#39;s KLineChart?&quot;"></a></h2><p>KLineChartit is a highly customizable professional lightweight financial chart.</p><h2 id="features" tabindex="-1">Features <a class="header-anchor" href="#features" aria-label="Permalink to &quot;Features&quot;"></a></h2><ul><li>📦 <strong>Out of the box:</strong> Simple and fast integration, basically zero cost to get started.</li><li>🚀 <strong>Lightweight and smooth:</strong> Zero dependencies, only 40k under gzip compression.</li><li>💪 <strong>Powerful functions:</strong> Built-in multiple indicators and line drawing models.</li><li>🎨 <strong>Highly scalable:</strong> With rich style configuration and API, the function can be extended as you like.</li><li>📱 <strong>Mobile:</strong> Support mobile, one chart, handle multiple terminals.</li><li>🛡 <strong>Typescript development:</strong> Provide complete type definition files.</li></ul>',5)]))}const g=e(o,[["render",r]]);export{p as __pageData,g as default};

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Overlay","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/overlay.md","filePath":"en-US/guide/overlay.md","lastUpdated":1715305682000}'),e={name:"en-US/guide/overlay.md"};function h(p,s,t,k,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="overlay" tabindex="-1">Overlay <a class="header-anchor" href="#overlay" aria-label="Permalink to &quot;Overlay&quot;"></a></h1><p>This document introduces the built-in overlays in the chart and how to customize a overlay.</p><h2 id="built-in-overlay-types" tabindex="-1">Built-in overlay types <a class="header-anchor" href="#built-in-overlay-types" aria-label="Permalink to &quot;Built-in overlay types&quot;"></a></h2><p><code>horizontalRayLine</code>, <code>horizontalSegment</code>, <code>horizontalStraightLine</code>, <code>verticalRayLine</code>, <code>verticalSegment</code>, <code>verticalStraightLine</code>, <code>rayLine</code>, <code>segment</code>, <code>straightLine</code>, <code>priceLine</code>, <code>priceChannelLine</code>, <code>parallelL</code>filineLine<code>, ci </code>, <code>simpleAnnotation</code>, <code>simpleTag</code></p><h2 id="custom-overlays" tabindex="-1">Custom overlays <a class="header-anchor" href="#custom-overlays" aria-label="Permalink to &quot;Custom overlays&quot;"></a></h2><p>Customize an overlay, then add it globally through <code>klinecharts.registerOverlay</code>, add it to the chart and use it like the built-in overlay.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Overlay","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/overlay.md","filePath":"en-US/guide/overlay.md","lastUpdated":1715305682000}'),e={name:"en-US/guide/overlay.md"};function h(p,s,t,k,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="overlay" tabindex="-1">Overlay <a class="header-anchor" href="#overlay" aria-label="Permalink to &quot;Overlay&quot;"></a></h1><p>This document introduces the built-in overlays in the chart and how to customize a overlay.</p><h2 id="built-in-overlay-types" tabindex="-1">Built-in overlay types <a class="header-anchor" href="#built-in-overlay-types" aria-label="Permalink to &quot;Built-in overlay types&quot;"></a></h2><p><code>horizontalRayLine</code>, <code>horizontalSegment</code>, <code>horizontalStraightLine</code>, <code>verticalRayLine</code>, <code>verticalSegment</code>, <code>verticalStraightLine</code>, <code>rayLine</code>, <code>segment</code>, <code>straightLine</code>, <code>priceLine</code>, <code>priceChannelLine</code>, <code>parallelL</code>filineLine<code>, ci </code>, <code>simpleAnnotation</code>, <code>simpleTag</code></p><h2 id="custom-overlays" tabindex="-1">Custom overlays <a class="header-anchor" href="#custom-overlays" aria-label="Permalink to &quot;Custom overlays&quot;"></a></h2><p>Customize an overlay, then add it globally through <code>klinecharts.registerOverlay</code>, add it to the chart and use it like the built-in overlay.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Name, a required field, used as the unique identifier for overlay creation</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"></span>

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Overlay","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/overlay.md","filePath":"en-US/guide/overlay.md","lastUpdated":1715305682000}'),e={name:"en-US/guide/overlay.md"};function h(p,s,t,k,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="overlay" tabindex="-1">Overlay <a class="header-anchor" href="#overlay" aria-label="Permalink to &quot;Overlay&quot;"></a></h1><p>This document introduces the built-in overlays in the chart and how to customize a overlay.</p><h2 id="built-in-overlay-types" tabindex="-1">Built-in overlay types <a class="header-anchor" href="#built-in-overlay-types" aria-label="Permalink to &quot;Built-in overlay types&quot;"></a></h2><p><code>horizontalRayLine</code>, <code>horizontalSegment</code>, <code>horizontalStraightLine</code>, <code>verticalRayLine</code>, <code>verticalSegment</code>, <code>verticalStraightLine</code>, <code>rayLine</code>, <code>segment</code>, <code>straightLine</code>, <code>priceLine</code>, <code>priceChannelLine</code>, <code>parallelL</code>filineLine<code>, ci </code>, <code>simpleAnnotation</code>, <code>simpleTag</code></p><h2 id="custom-overlays" tabindex="-1">Custom overlays <a class="header-anchor" href="#custom-overlays" aria-label="Permalink to &quot;Custom overlays&quot;"></a></h2><p>Customize an overlay, then add it globally through <code>klinecharts.registerOverlay</code>, add it to the chart and use it like the built-in overlay.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Overlay","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/overlay.md","filePath":"en-US/guide/overlay.md","lastUpdated":1715305682000}'),e={name:"en-US/guide/overlay.md"};function h(p,s,t,k,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="overlay" tabindex="-1">Overlay <a class="header-anchor" href="#overlay" aria-label="Permalink to &quot;Overlay&quot;"></a></h1><p>This document introduces the built-in overlays in the chart and how to customize a overlay.</p><h2 id="built-in-overlay-types" tabindex="-1">Built-in overlay types <a class="header-anchor" href="#built-in-overlay-types" aria-label="Permalink to &quot;Built-in overlay types&quot;"></a></h2><p><code>horizontalRayLine</code>, <code>horizontalSegment</code>, <code>horizontalStraightLine</code>, <code>verticalRayLine</code>, <code>verticalSegment</code>, <code>verticalStraightLine</code>, <code>rayLine</code>, <code>segment</code>, <code>straightLine</code>, <code>priceLine</code>, <code>priceChannelLine</code>, <code>parallelL</code>filineLine<code>, ci </code>, <code>simpleAnnotation</code>, <code>simpleTag</code></p><h2 id="custom-overlays" tabindex="-1">Custom overlays <a class="header-anchor" href="#custom-overlays" aria-label="Permalink to &quot;Custom overlays&quot;"></a></h2><p>Customize an overlay, then add it globally through <code>klinecharts.registerOverlay</code>, add it to the chart and use it like the built-in overlay.</p><h3 id="attribute-description" tabindex="-1">Attribute description <a class="header-anchor" href="#attribute-description" aria-label="Permalink to &quot;Attribute description&quot;"></a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Name, a required field, used as the unique identifier for overlay creation</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"></span>

View File

@ -1,4 +1,4 @@
import{S as n}from"./chunks/Explain.DmvAECHq.js";import{c as h,j as i,a,G as k,a2 as l,o as p}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"🎨 Style","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/styles.md","filePath":"en-US/guide/styles.md","lastUpdated":1727028421000}'),t={name:"en-US/guide/styles.md"},y=Object.assign(t,{setup(E){return(e,s)=>(p(),h("div",null,[s[0]||(s[0]=i("h1",{id:"🎨-style",tabindex:"-1"},[a("🎨 Style "),i("a",{class:"header-anchor",href:"#🎨-style","aria-label":'Permalink to "🎨 Style"'},"")],-1)),s[1]||(s[1]=i("p",null,[a("Whether you see a point or a line on the chart, you can basically customize the style. Changes can be made via the chart method "),i("code",null,"init(ds, options)"),a(" or the chart instance method "),i("code",null,"setStyles(styles)"),a(".")],-1)),s[2]||(s[2]=i("h2",{id:"picture-explanation",tabindex:"-1"},[a("Picture explanation "),i("a",{class:"header-anchor",href:"#picture-explanation","aria-label":'Permalink to "Picture explanation"'},"")],-1)),k(n),s[3]||(s[3]=l(`<h2 id="default-full-configuration" tabindex="-1">Default full configuration <a class="header-anchor" href="#default-full-configuration" aria-label="Permalink to &quot;Default full configuration&quot;"></a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{S as n}from"./chunks/Explain.BoXSHSKV.js";import{c as h,j as i,a,G as k,a2 as l,o as p}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"🎨 Style","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/styles.md","filePath":"en-US/guide/styles.md","lastUpdated":1727028421000}'),t={name:"en-US/guide/styles.md"},y=Object.assign(t,{setup(E){return(e,s)=>(p(),h("div",null,[s[0]||(s[0]=i("h1",{id:"🎨-style",tabindex:"-1"},[a("🎨 Style "),i("a",{class:"header-anchor",href:"#🎨-style","aria-label":'Permalink to "🎨 Style"'},"")],-1)),s[1]||(s[1]=i("p",null,[a("Whether you see a point or a line on the chart, you can basically customize the style. Changes can be made via the chart method "),i("code",null,"init(ds, options)"),a(" or the chart instance method "),i("code",null,"setStyles(styles)"),a(".")],-1)),s[2]||(s[2]=i("h2",{id:"picture-explanation",tabindex:"-1"},[a("Picture explanation "),i("a",{class:"header-anchor",href:"#picture-explanation","aria-label":'Permalink to "Picture explanation"'},"")],-1)),k(n),s[3]||(s[3]=l(`<h2 id="default-full-configuration" tabindex="-1">Default full configuration <a class="header-anchor" href="#default-full-configuration" aria-label="Permalink to &quot;Default full configuration&quot;"></a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> grid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> horizontal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>

View File

@ -1,4 +1,4 @@
import{S as n}from"./chunks/Explain.DmvAECHq.js";import{c as h,j as i,a,G as k,a2 as l,o as p}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"🎨 Style","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/styles.md","filePath":"en-US/guide/styles.md","lastUpdated":1727028421000}'),t={name:"en-US/guide/styles.md"},y=Object.assign(t,{setup(E){return(e,s)=>(p(),h("div",null,[s[0]||(s[0]=i("h1",{id:"🎨-style",tabindex:"-1"},[a("🎨 Style "),i("a",{class:"header-anchor",href:"#🎨-style","aria-label":'Permalink to "🎨 Style"'},"")],-1)),s[1]||(s[1]=i("p",null,[a("Whether you see a point or a line on the chart, you can basically customize the style. Changes can be made via the chart method "),i("code",null,"init(ds, options)"),a(" or the chart instance method "),i("code",null,"setStyles(styles)"),a(".")],-1)),s[2]||(s[2]=i("h2",{id:"picture-explanation",tabindex:"-1"},[a("Picture explanation "),i("a",{class:"header-anchor",href:"#picture-explanation","aria-label":'Permalink to "Picture explanation"'},"")],-1)),k(n),s[3]||(s[3]=l(`<h2 id="default-full-configuration" tabindex="-1">Default full configuration <a class="header-anchor" href="#default-full-configuration" aria-label="Permalink to &quot;Default full configuration&quot;"></a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{S as n}from"./chunks/Explain.BoXSHSKV.js";import{c as h,j as i,a,G as k,a2 as l,o as p}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"🎨 Style","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/styles.md","filePath":"en-US/guide/styles.md","lastUpdated":1727028421000}'),t={name:"en-US/guide/styles.md"},y=Object.assign(t,{setup(E){return(e,s)=>(p(),h("div",null,[s[0]||(s[0]=i("h1",{id:"🎨-style",tabindex:"-1"},[a("🎨 Style "),i("a",{class:"header-anchor",href:"#🎨-style","aria-label":'Permalink to "🎨 Style"'},"")],-1)),s[1]||(s[1]=i("p",null,[a("Whether you see a point or a line on the chart, you can basically customize the style. Changes can be made via the chart method "),i("code",null,"init(ds, options)"),a(" or the chart instance method "),i("code",null,"setStyles(styles)"),a(".")],-1)),s[2]||(s[2]=i("h2",{id:"picture-explanation",tabindex:"-1"},[a("Picture explanation "),i("a",{class:"header-anchor",href:"#picture-explanation","aria-label":'Permalink to "Picture explanation"'},"")],-1)),k(n),s[3]||(s[3]=l(`<h2 id="default-full-configuration" tabindex="-1">Default full configuration <a class="header-anchor" href="#default-full-configuration" aria-label="Permalink to &quot;Default full configuration&quot;"></a></h2><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> grid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> horizontal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>

View File

@ -1 +1 @@
import{_ as e,c as i,o as t}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Highly customizable professional lightweight financial chart","description":"","frontmatter":{"title":"Highly customizable professional lightweight financial chart","layout":"home","features":[{"icon":{"light":"/images/box_light.png","dark":"/images/box_dark.png"},"title":"Out of the box","details":"Simple and fast integration, zero cost to get started, displaying a chart in just 3 lines of code, allowing users to focus on data integration."},{"icon":{"light":"/images/rocket_light.png","dark":"/images/rocket_dark.png"},"title":"Lightweight and smooth","details":"Zero dependency, only about 50k under Gzip compression. Charts can remain smooth even with thousands of data."},{"icon":{"light":"/images/power_light.png","dark":"/images/power_dark.png"},"title":"Powerful functionality","details":"Built in multiple candlestick charts, multiple coordinate axes, dozens of commonly used indicators, and line drawing models to meet most needs."},{"icon":{"light":"/images/expand_light.png","dark":"/images/expand_dark.png"},"title":"Highly expand","details":"Provide rich APIs, style configurations, technical specifications, line drawing models, and coordinate axis extensions, with customizable functional combinations."},{"icon":{"light":"/images/mobile_light.png","dark":"/images/mobile_dark.png"},"title":"Mobile","details":"Specially adapted for mobile devices, fully capable of running on mobile browsers."},{"icon":{"light":"/images/typescript_light.png","dark":"/images/typescript_dark.png"},"title":"Typescript","details":"Provide a complete Typescript declaration file, perfectly supporting Typescript development."}]},"headers":[],"relativePath":"en-US/index.md","filePath":"en-US/index.md","lastUpdated":1729962579000}'),a={name:"en-US/index.md"};function n(o,s,l,r,d,c){return t(),i("div")}const m=e(a,[["render",n]]);export{g as __pageData,m as default};
import{_ as e,c as i,o as t}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Highly customizable professional lightweight financial chart","description":"","frontmatter":{"title":"Highly customizable professional lightweight financial chart","layout":"home","features":[{"icon":{"light":"/images/box_light.png","dark":"/images/box_dark.png"},"title":"Out of the box","details":"Simple and fast integration, zero cost to get started, displaying a chart in just 3 lines of code, allowing users to focus on data integration."},{"icon":{"light":"/images/rocket_light.png","dark":"/images/rocket_dark.png"},"title":"Lightweight and smooth","details":"Zero dependency, only about 50k under Gzip compression. Charts can remain smooth even with thousands of data."},{"icon":{"light":"/images/power_light.png","dark":"/images/power_dark.png"},"title":"Powerful functionality","details":"Built in multiple candlestick charts, multiple coordinate axes, dozens of commonly used indicators, and line drawing models to meet most needs."},{"icon":{"light":"/images/expand_light.png","dark":"/images/expand_dark.png"},"title":"Highly expand","details":"Provide rich APIs, style configurations, technical specifications, line drawing models, and coordinate axis extensions, with customizable functional combinations."},{"icon":{"light":"/images/mobile_light.png","dark":"/images/mobile_dark.png"},"title":"Mobile","details":"Specially adapted for mobile devices, fully capable of running on mobile browsers."},{"icon":{"light":"/images/typescript_light.png","dark":"/images/typescript_dark.png"},"title":"Typescript","details":"Provide a complete Typescript declaration file, perfectly supporting Typescript development."}]},"headers":[],"relativePath":"en-US/index.md","filePath":"en-US/index.md","lastUpdated":1729962579000}'),a={name:"en-US/index.md"};function n(o,s,l,r,d,c){return t(),i("div")}const m=e(a,[["render",n]]);export{g as __pageData,m as default};

View File

@ -1 +1 @@
import{_ as e,c as i,o as t}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Highly customizable professional lightweight financial chart","description":"","frontmatter":{"title":"Highly customizable professional lightweight financial chart","layout":"home","features":[{"icon":{"light":"/images/box_light.png","dark":"/images/box_dark.png"},"title":"Out of the box","details":"Simple and fast integration, zero cost to get started, displaying a chart in just 3 lines of code, allowing users to focus on data integration."},{"icon":{"light":"/images/rocket_light.png","dark":"/images/rocket_dark.png"},"title":"Lightweight and smooth","details":"Zero dependency, only about 50k under Gzip compression. Charts can remain smooth even with thousands of data."},{"icon":{"light":"/images/power_light.png","dark":"/images/power_dark.png"},"title":"Powerful functionality","details":"Built in multiple candlestick charts, multiple coordinate axes, dozens of commonly used indicators, and line drawing models to meet most needs."},{"icon":{"light":"/images/expand_light.png","dark":"/images/expand_dark.png"},"title":"Highly expand","details":"Provide rich APIs, style configurations, technical specifications, line drawing models, and coordinate axis extensions, with customizable functional combinations."},{"icon":{"light":"/images/mobile_light.png","dark":"/images/mobile_dark.png"},"title":"Mobile","details":"Specially adapted for mobile devices, fully capable of running on mobile browsers."},{"icon":{"light":"/images/typescript_light.png","dark":"/images/typescript_dark.png"},"title":"Typescript","details":"Provide a complete Typescript declaration file, perfectly supporting Typescript development."}]},"headers":[],"relativePath":"en-US/index.md","filePath":"en-US/index.md","lastUpdated":1729962579000}'),a={name:"en-US/index.md"};function n(o,s,l,r,d,c){return t(),i("div")}const m=e(a,[["render",n]]);export{g as __pageData,m as default};
import{_ as e,c as i,o as t}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Highly customizable professional lightweight financial chart","description":"","frontmatter":{"title":"Highly customizable professional lightweight financial chart","layout":"home","features":[{"icon":{"light":"/images/box_light.png","dark":"/images/box_dark.png"},"title":"Out of the box","details":"Simple and fast integration, zero cost to get started, displaying a chart in just 3 lines of code, allowing users to focus on data integration."},{"icon":{"light":"/images/rocket_light.png","dark":"/images/rocket_dark.png"},"title":"Lightweight and smooth","details":"Zero dependency, only about 50k under Gzip compression. Charts can remain smooth even with thousands of data."},{"icon":{"light":"/images/power_light.png","dark":"/images/power_dark.png"},"title":"Powerful functionality","details":"Built in multiple candlestick charts, multiple coordinate axes, dozens of commonly used indicators, and line drawing models to meet most needs."},{"icon":{"light":"/images/expand_light.png","dark":"/images/expand_dark.png"},"title":"Highly expand","details":"Provide rich APIs, style configurations, technical specifications, line drawing models, and coordinate axis extensions, with customizable functional combinations."},{"icon":{"light":"/images/mobile_light.png","dark":"/images/mobile_dark.png"},"title":"Mobile","details":"Specially adapted for mobile devices, fully capable of running on mobile browsers."},{"icon":{"light":"/images/typescript_light.png","dark":"/images/typescript_dark.png"},"title":"Typescript","details":"Provide a complete Typescript declaration file, perfectly supporting Typescript development."}]},"headers":[],"relativePath":"en-US/index.md","filePath":"en-US/index.md","lastUpdated":1729962579000}'),a={name:"en-US/index.md"};function n(o,s,l,r,d,c){return t(),i("div")}const m=e(a,[["render",n]]);export{g as __pageData,m as default};

View File

@ -1,4 +1,4 @@
import{_ as t,c as e,a2 as i,o as n}from"./chunks/framework.Bh2a4ahF.js";const u=JSON.parse('{"title":"🙋 FAQ","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/faq.md","filePath":"en-US/more/faq.md","lastUpdated":1712170888000}'),o={name:"en-US/more/faq.md"};function s(h,a,l,c,r,d){return n(),e("div",null,a[0]||(a[0]=[i(`<h1 id="🙋-faq" tabindex="-1">🙋 FAQ <a class="header-anchor" href="#🙋-faq" aria-label="Permalink to &quot;🙋 FAQ&quot;"></a></h1><h2 id="after-the-chart-is-initialized-only-one-line-can-be-seen" tabindex="-1">After the chart is initialized, only one line can be seen? <a class="header-anchor" href="#after-the-chart-is-initialized-only-one-line-can-be-seen" aria-label="Permalink to &quot;After the chart is initialized, only one line can be seen?&quot;"></a></h2><p>The chart always fills the container, checking to see if the container has height.</p><h2 id="the-candle-shows-a-line-no-fluctuation-what-to-do" tabindex="-1">The candle shows a line, no fluctuation, what to do? <a class="header-anchor" href="#the-candle-shows-a-line-no-fluctuation-what-to-do" aria-label="Permalink to &quot;The candle shows a line, no fluctuation, what to do?&quot;"></a></h2><p>Chart default price precision is two decimal, call <code>setPriceVolumePrecision(pricePrecision, volumePrecision)</code> to set the precision.</p><h2 id="how-to-create-a-real-time-chart" tabindex="-1">How to create a real-time chart? <a class="header-anchor" href="#how-to-create-a-real-time-chart" aria-label="Permalink to &quot;How to create a real-time chart?&quot;"></a></h2><p>Through style settings.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chart.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setStyles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
import{_ as t,c as e,a2 as i,o as n}from"./chunks/framework.Xx8dNX0P.js";const u=JSON.parse('{"title":"🙋 FAQ","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/faq.md","filePath":"en-US/more/faq.md","lastUpdated":1712170888000}'),o={name:"en-US/more/faq.md"};function s(h,a,l,c,r,d){return n(),e("div",null,a[0]||(a[0]=[i(`<h1 id="🙋-faq" tabindex="-1">🙋 FAQ <a class="header-anchor" href="#🙋-faq" aria-label="Permalink to &quot;🙋 FAQ&quot;"></a></h1><h2 id="after-the-chart-is-initialized-only-one-line-can-be-seen" tabindex="-1">After the chart is initialized, only one line can be seen? <a class="header-anchor" href="#after-the-chart-is-initialized-only-one-line-can-be-seen" aria-label="Permalink to &quot;After the chart is initialized, only one line can be seen?&quot;"></a></h2><p>The chart always fills the container, checking to see if the container has height.</p><h2 id="the-candle-shows-a-line-no-fluctuation-what-to-do" tabindex="-1">The candle shows a line, no fluctuation, what to do? <a class="header-anchor" href="#the-candle-shows-a-line-no-fluctuation-what-to-do" aria-label="Permalink to &quot;The candle shows a line, no fluctuation, what to do?&quot;"></a></h2><p>Chart default price precision is two decimal, call <code>setPriceVolumePrecision(pricePrecision, volumePrecision)</code> to set the precision.</p><h2 id="how-to-create-a-real-time-chart" tabindex="-1">How to create a real-time chart? <a class="header-anchor" href="#how-to-create-a-real-time-chart" aria-label="Permalink to &quot;How to create a real-time chart?&quot;"></a></h2><p>Through style settings.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chart.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setStyles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> candle: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;area&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>

View File

@ -1,4 +1,4 @@
import{_ as t,c as e,a2 as i,o as n}from"./chunks/framework.Bh2a4ahF.js";const u=JSON.parse('{"title":"🙋 FAQ","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/faq.md","filePath":"en-US/more/faq.md","lastUpdated":1712170888000}'),o={name:"en-US/more/faq.md"};function s(h,a,l,c,r,d){return n(),e("div",null,a[0]||(a[0]=[i(`<h1 id="🙋-faq" tabindex="-1">🙋 FAQ <a class="header-anchor" href="#🙋-faq" aria-label="Permalink to &quot;🙋 FAQ&quot;"></a></h1><h2 id="after-the-chart-is-initialized-only-one-line-can-be-seen" tabindex="-1">After the chart is initialized, only one line can be seen? <a class="header-anchor" href="#after-the-chart-is-initialized-only-one-line-can-be-seen" aria-label="Permalink to &quot;After the chart is initialized, only one line can be seen?&quot;"></a></h2><p>The chart always fills the container, checking to see if the container has height.</p><h2 id="the-candle-shows-a-line-no-fluctuation-what-to-do" tabindex="-1">The candle shows a line, no fluctuation, what to do? <a class="header-anchor" href="#the-candle-shows-a-line-no-fluctuation-what-to-do" aria-label="Permalink to &quot;The candle shows a line, no fluctuation, what to do?&quot;"></a></h2><p>Chart default price precision is two decimal, call <code>setPriceVolumePrecision(pricePrecision, volumePrecision)</code> to set the precision.</p><h2 id="how-to-create-a-real-time-chart" tabindex="-1">How to create a real-time chart? <a class="header-anchor" href="#how-to-create-a-real-time-chart" aria-label="Permalink to &quot;How to create a real-time chart?&quot;"></a></h2><p>Through style settings.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chart.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setStyles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
import{_ as t,c as e,a2 as i,o as n}from"./chunks/framework.Xx8dNX0P.js";const u=JSON.parse('{"title":"🙋 FAQ","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/faq.md","filePath":"en-US/more/faq.md","lastUpdated":1712170888000}'),o={name:"en-US/more/faq.md"};function s(h,a,l,c,r,d){return n(),e("div",null,a[0]||(a[0]=[i(`<h1 id="🙋-faq" tabindex="-1">🙋 FAQ <a class="header-anchor" href="#🙋-faq" aria-label="Permalink to &quot;🙋 FAQ&quot;"></a></h1><h2 id="after-the-chart-is-initialized-only-one-line-can-be-seen" tabindex="-1">After the chart is initialized, only one line can be seen? <a class="header-anchor" href="#after-the-chart-is-initialized-only-one-line-can-be-seen" aria-label="Permalink to &quot;After the chart is initialized, only one line can be seen?&quot;"></a></h2><p>The chart always fills the container, checking to see if the container has height.</p><h2 id="the-candle-shows-a-line-no-fluctuation-what-to-do" tabindex="-1">The candle shows a line, no fluctuation, what to do? <a class="header-anchor" href="#the-candle-shows-a-line-no-fluctuation-what-to-do" aria-label="Permalink to &quot;The candle shows a line, no fluctuation, what to do?&quot;"></a></h2><p>Chart default price precision is two decimal, call <code>setPriceVolumePrecision(pricePrecision, volumePrecision)</code> to set the precision.</p><h2 id="how-to-create-a-real-time-chart" tabindex="-1">How to create a real-time chart? <a class="header-anchor" href="#how-to-create-a-real-time-chart" aria-label="Permalink to &quot;How to create a real-time chart?&quot;"></a></h2><p>Through style settings.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chart.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setStyles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> candle: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;area&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>

View File

@ -1 +1 @@
import{_ as a}from"./chunks/wechat.DrOZvozD.js";import{_ as t,c as r,a2 as i,o as s}from"./chunks/framework.Bh2a4ahF.js";const b=JSON.parse('{"title":"💬 Feedback","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/feedback.md","filePath":"en-US/more/feedback.md","lastUpdated":1727029740000}'),o={name:"en-US/more/feedback.md"};function h(n,e,l,c,u,d){return s(),r("div",null,e[0]||(e[0]=[i('<h1 id="💬-feedback" tabindex="-1">💬 Feedback <a class="header-anchor" href="#💬-feedback" aria-label="Permalink to &quot;💬 Feedback&quot;"></a></h1><h2 id="github" tabindex="-1">Github <a class="header-anchor" href="#github" aria-label="Permalink to &quot;Github&quot;"></a></h2><ul><li>Issues: <a href="https://github.com/liihuu/KLineChart/issues" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/issues</a></li><li>Discussions: <a href="https://github.com/liihuu/KLineChart/discussions" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/discussions</a></li></ul><h2 id="telegram" tabindex="-1">Telegram <a class="header-anchor" href="#telegram" aria-label="Permalink to &quot;Telegram&quot;"></a></h2><p><a href="https://t.me/+098syuQtzI0yNzll" target="_blank" rel="noreferrer">https://t.me/+098syuQtzI0yNzll</a></p><h2 id="wechat-discussion-group" tabindex="-1">Wechat discussion group <a class="header-anchor" href="#wechat-discussion-group" aria-label="Permalink to &quot;Wechat discussion group&quot;"></a></h2><p>Scan to add developers, note KLineChart, and join the group chat. <img style="width:180px;margin-top:10px;" src="'+a+'"></p>',7)]))}const f=t(o,[["render",h]]);export{b as __pageData,f as default};
import{_ as a}from"./chunks/wechat.DrOZvozD.js";import{_ as t,c as r,a2 as i,o as s}from"./chunks/framework.Xx8dNX0P.js";const b=JSON.parse('{"title":"💬 Feedback","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/feedback.md","filePath":"en-US/more/feedback.md","lastUpdated":1727029740000}'),o={name:"en-US/more/feedback.md"};function h(n,e,l,c,u,d){return s(),r("div",null,e[0]||(e[0]=[i('<h1 id="💬-feedback" tabindex="-1">💬 Feedback <a class="header-anchor" href="#💬-feedback" aria-label="Permalink to &quot;💬 Feedback&quot;"></a></h1><h2 id="github" tabindex="-1">Github <a class="header-anchor" href="#github" aria-label="Permalink to &quot;Github&quot;"></a></h2><ul><li>Issues: <a href="https://github.com/liihuu/KLineChart/issues" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/issues</a></li><li>Discussions: <a href="https://github.com/liihuu/KLineChart/discussions" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/discussions</a></li></ul><h2 id="telegram" tabindex="-1">Telegram <a class="header-anchor" href="#telegram" aria-label="Permalink to &quot;Telegram&quot;"></a></h2><p><a href="https://t.me/+098syuQtzI0yNzll" target="_blank" rel="noreferrer">https://t.me/+098syuQtzI0yNzll</a></p><h2 id="wechat-discussion-group" tabindex="-1">Wechat discussion group <a class="header-anchor" href="#wechat-discussion-group" aria-label="Permalink to &quot;Wechat discussion group&quot;"></a></h2><p>Scan to add developers, note KLineChart, and join the group chat. <img style="width:180px;margin-top:10px;" src="'+a+'"></p>',7)]))}const f=t(o,[["render",h]]);export{b as __pageData,f as default};

View File

@ -1 +1 @@
import{_ as a}from"./chunks/wechat.DrOZvozD.js";import{_ as t,c as r,a2 as i,o as s}from"./chunks/framework.Bh2a4ahF.js";const b=JSON.parse('{"title":"💬 Feedback","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/feedback.md","filePath":"en-US/more/feedback.md","lastUpdated":1727029740000}'),o={name:"en-US/more/feedback.md"};function h(n,e,l,c,u,d){return s(),r("div",null,e[0]||(e[0]=[i('<h1 id="💬-feedback" tabindex="-1">💬 Feedback <a class="header-anchor" href="#💬-feedback" aria-label="Permalink to &quot;💬 Feedback&quot;"></a></h1><h2 id="github" tabindex="-1">Github <a class="header-anchor" href="#github" aria-label="Permalink to &quot;Github&quot;"></a></h2><ul><li>Issues: <a href="https://github.com/liihuu/KLineChart/issues" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/issues</a></li><li>Discussions: <a href="https://github.com/liihuu/KLineChart/discussions" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/discussions</a></li></ul><h2 id="telegram" tabindex="-1">Telegram <a class="header-anchor" href="#telegram" aria-label="Permalink to &quot;Telegram&quot;"></a></h2><p><a href="https://t.me/+098syuQtzI0yNzll" target="_blank" rel="noreferrer">https://t.me/+098syuQtzI0yNzll</a></p><h2 id="wechat-discussion-group" tabindex="-1">Wechat discussion group <a class="header-anchor" href="#wechat-discussion-group" aria-label="Permalink to &quot;Wechat discussion group&quot;"></a></h2><p>Scan to add developers, note KLineChart, and join the group chat. <img style="width:180px;margin-top:10px;" src="'+a+'"></p>',7)]))}const f=t(o,[["render",h]]);export{b as __pageData,f as default};
import{_ as a}from"./chunks/wechat.DrOZvozD.js";import{_ as t,c as r,a2 as i,o as s}from"./chunks/framework.Xx8dNX0P.js";const b=JSON.parse('{"title":"💬 Feedback","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/feedback.md","filePath":"en-US/more/feedback.md","lastUpdated":1727029740000}'),o={name:"en-US/more/feedback.md"};function h(n,e,l,c,u,d){return s(),r("div",null,e[0]||(e[0]=[i('<h1 id="💬-feedback" tabindex="-1">💬 Feedback <a class="header-anchor" href="#💬-feedback" aria-label="Permalink to &quot;💬 Feedback&quot;"></a></h1><h2 id="github" tabindex="-1">Github <a class="header-anchor" href="#github" aria-label="Permalink to &quot;Github&quot;"></a></h2><ul><li>Issues: <a href="https://github.com/liihuu/KLineChart/issues" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/issues</a></li><li>Discussions: <a href="https://github.com/liihuu/KLineChart/discussions" target="_blank" rel="noreferrer">https://github.com/liihuu/KLineChart/discussions</a></li></ul><h2 id="telegram" tabindex="-1">Telegram <a class="header-anchor" href="#telegram" aria-label="Permalink to &quot;Telegram&quot;"></a></h2><p><a href="https://t.me/+098syuQtzI0yNzll" target="_blank" rel="noreferrer">https://t.me/+098syuQtzI0yNzll</a></p><h2 id="wechat-discussion-group" tabindex="-1">Wechat discussion group <a class="header-anchor" href="#wechat-discussion-group" aria-label="Permalink to &quot;Wechat discussion group&quot;"></a></h2><p>Scan to add developers, note KLineChart, and join the group chat. <img style="width:180px;margin-top:10px;" src="'+a+'"></p>',7)]))}const f=t(o,[["render",h]]);export{b as __pageData,f as default};

View File

@ -1,2 +1,2 @@
import{P as t,a as n}from"./chunks/ProjectModuleExplain.BqeKXWQQ.js";import{c as i,a2 as o,G as a,j as d,a as r,o as l}from"./chunks/framework.Bh2a4ahF.js";const h=JSON.parse('{"title":"Local Development","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/local-development.md","filePath":"en-US/more/local-development.md","lastUpdated":1727028421000}'),c={name:"en-US/more/local-development.md"},b=Object.assign(c,{setup(s){return(u,e)=>(l(),i("div",null,[e[0]||(e[0]=o('<h1 id="local-development" tabindex="-1">Local Development <a class="header-anchor" href="#local-development" aria-label="Permalink to &quot;Local Development&quot;"></a></h1><h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-label="Permalink to &quot;Introduction&quot;"></a></h2><p>If you see this, you may be interested in improving the KLineChart core. Thank you <a href="https://github.com/fish2016" target="_blank" rel="noreferrer">@fish2016</a> This document was written.</p><h2 id="notice" tabindex="-1">Notice <a class="header-anchor" href="#notice" aria-label="Permalink to &quot;Notice&quot;"></a></h2><h3 id="file-directory-description" tabindex="-1">File directory description <a class="header-anchor" href="#file-directory-description" aria-label="Permalink to &quot;File directory description&quot;"></a></h3>',5)),a(t),e[1]||(e[1]=d("h3",{id:"module-dependencies",tabindex:"-1"},[r("Module dependencies "),d("a",{class:"header-anchor",href:"#module-dependencies","aria-label":'Permalink to "Module dependencies"'},"")],-1)),a(n),e[2]||(e[2]=o(`<p>The above diagram shows the hierarchy of chart modules from top to bottom, with the lower layer serving as the upper layer container.</p><ul><li><code>Figure</code> Basic shapes, such as circle, polygon, rect, text, etc.</li><li><code>View</code> Retrieve data from <code>ChartStore</code> and perform single business plotting, such as candlesticks, area, grid line, crosshair, indicator, etc</li><li><code>Widget</code> Create canvas and assemble the relevant <code>View</code> together.</li><li><code>Pane</code> Create dom container and assemble the <code>Widget</code> together.</li><li><code>Chart</code> 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 <code>ChartStore</code> and notify subordinate components to update as needed.</li></ul><h2 id="development" tabindex="-1">Development <a class="header-anchor" href="#development" aria-label="Permalink to &quot;Development&quot;"></a></h2><h3 id="installation-dependencies" tabindex="-1">Installation dependencies <a class="header-anchor" href="#installation-dependencies" aria-label="Permalink to &quot;Installation dependencies&quot;"></a></h3><p>The project adopts a dependency <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> The package manager for management requires <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> environment. You can use npm, pnpm, or yarn to install dependencies.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Root dir run</span></span>
import{P as t,a as n}from"./chunks/ProjectModuleExplain.Dp1DCvX1.js";import{c as i,a2 as o,G as a,j as d,a as r,o as l}from"./chunks/framework.Xx8dNX0P.js";const h=JSON.parse('{"title":"Local Development","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/local-development.md","filePath":"en-US/more/local-development.md","lastUpdated":1727028421000}'),c={name:"en-US/more/local-development.md"},b=Object.assign(c,{setup(s){return(u,e)=>(l(),i("div",null,[e[0]||(e[0]=o('<h1 id="local-development" tabindex="-1">Local Development <a class="header-anchor" href="#local-development" aria-label="Permalink to &quot;Local Development&quot;"></a></h1><h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-label="Permalink to &quot;Introduction&quot;"></a></h2><p>If you see this, you may be interested in improving the KLineChart core. Thank you <a href="https://github.com/fish2016" target="_blank" rel="noreferrer">@fish2016</a> This document was written.</p><h2 id="notice" tabindex="-1">Notice <a class="header-anchor" href="#notice" aria-label="Permalink to &quot;Notice&quot;"></a></h2><h3 id="file-directory-description" tabindex="-1">File directory description <a class="header-anchor" href="#file-directory-description" aria-label="Permalink to &quot;File directory description&quot;"></a></h3>',5)),a(t),e[1]||(e[1]=d("h3",{id:"module-dependencies",tabindex:"-1"},[r("Module dependencies "),d("a",{class:"header-anchor",href:"#module-dependencies","aria-label":'Permalink to "Module dependencies"'},"")],-1)),a(n),e[2]||(e[2]=o(`<p>The above diagram shows the hierarchy of chart modules from top to bottom, with the lower layer serving as the upper layer container.</p><ul><li><code>Figure</code> Basic shapes, such as circle, polygon, rect, text, etc.</li><li><code>View</code> Retrieve data from <code>ChartStore</code> and perform single business plotting, such as candlesticks, area, grid line, crosshair, indicator, etc</li><li><code>Widget</code> Create canvas and assemble the relevant <code>View</code> together.</li><li><code>Pane</code> Create dom container and assemble the <code>Widget</code> together.</li><li><code>Chart</code> 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 <code>ChartStore</code> and notify subordinate components to update as needed.</li></ul><h2 id="development" tabindex="-1">Development <a class="header-anchor" href="#development" aria-label="Permalink to &quot;Development&quot;"></a></h2><h3 id="installation-dependencies" tabindex="-1">Installation dependencies <a class="header-anchor" href="#installation-dependencies" aria-label="Permalink to &quot;Installation dependencies&quot;"></a></h3><p>The project adopts a dependency <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> The package manager for management requires <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> environment. You can use npm, pnpm, or yarn to install dependencies.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Root dir run</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span></code></pre></div><h3 id="npm-execute-command-description" tabindex="-1">NPM Execute command description <a class="header-anchor" href="#npm-execute-command-description" aria-label="Permalink to &quot;NPM Execute command description&quot;"></a></h3><ul><li><code>lint</code>: Run <code>npm run lint</code> verify code rules.</li><li><code>clean</code>: Run <code>npm run clean</code> clean up the built files.</li><li><code>build-esm</code>: Run <code>npm run build-esm</code> built esm module.</li><li><code>build-cjs</code>: Run <code>npm run build-cjs</code> built commonjs module.</li><li><code>build-umd:dev</code>: Run <code>npm run build-umd:dev</code> built umd development module.</li><li><code>build-umd:prod</code>: Run <code>npm run build-umd:dev</code> built umd production module.</li><li><code>build-umd</code>: Run <code>npm run build-umd</code> built umd development and production module</li><li><code>build-core</code>: Run <code>npm run build-core</code> built esm, commonjs umd development and umd production module.</li><li><code>build-dts</code>: Run <code>npm run build-dts</code> generate typescript dependency files.</li><li><code>build</code>: Run <code>npm run build</code> built esm, commonjs umd development and umd production module and generate typescript dependency files.</li></ul><h3 id="debug" tabindex="-1">Debug <a class="header-anchor" href="#debug" aria-label="Permalink to &quot;Debug&quot;"></a></h3><p>This project does not have a debugging project and requires the creation of a new project, use <code>npm link</code> importor import <code>index.ts</code> debug. You can use <a href="https://vitejs.dev/" target="_blank" rel="noreferrer">vite</a> create a project.</p>`,10))]))}});export{h as __pageData,b as default};

View File

@ -1,2 +1,2 @@
import{P as t,a as n}from"./chunks/ProjectModuleExplain.BqeKXWQQ.js";import{c as i,a2 as o,G as a,j as d,a as r,o as l}from"./chunks/framework.Bh2a4ahF.js";const h=JSON.parse('{"title":"Local Development","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/local-development.md","filePath":"en-US/more/local-development.md","lastUpdated":1727028421000}'),c={name:"en-US/more/local-development.md"},b=Object.assign(c,{setup(s){return(u,e)=>(l(),i("div",null,[e[0]||(e[0]=o('<h1 id="local-development" tabindex="-1">Local Development <a class="header-anchor" href="#local-development" aria-label="Permalink to &quot;Local Development&quot;"></a></h1><h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-label="Permalink to &quot;Introduction&quot;"></a></h2><p>If you see this, you may be interested in improving the KLineChart core. Thank you <a href="https://github.com/fish2016" target="_blank" rel="noreferrer">@fish2016</a> This document was written.</p><h2 id="notice" tabindex="-1">Notice <a class="header-anchor" href="#notice" aria-label="Permalink to &quot;Notice&quot;"></a></h2><h3 id="file-directory-description" tabindex="-1">File directory description <a class="header-anchor" href="#file-directory-description" aria-label="Permalink to &quot;File directory description&quot;"></a></h3>',5)),a(t),e[1]||(e[1]=d("h3",{id:"module-dependencies",tabindex:"-1"},[r("Module dependencies "),d("a",{class:"header-anchor",href:"#module-dependencies","aria-label":'Permalink to "Module dependencies"'},"")],-1)),a(n),e[2]||(e[2]=o(`<p>The above diagram shows the hierarchy of chart modules from top to bottom, with the lower layer serving as the upper layer container.</p><ul><li><code>Figure</code> Basic shapes, such as circle, polygon, rect, text, etc.</li><li><code>View</code> Retrieve data from <code>ChartStore</code> and perform single business plotting, such as candlesticks, area, grid line, crosshair, indicator, etc</li><li><code>Widget</code> Create canvas and assemble the relevant <code>View</code> together.</li><li><code>Pane</code> Create dom container and assemble the <code>Widget</code> together.</li><li><code>Chart</code> 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 <code>ChartStore</code> and notify subordinate components to update as needed.</li></ul><h2 id="development" tabindex="-1">Development <a class="header-anchor" href="#development" aria-label="Permalink to &quot;Development&quot;"></a></h2><h3 id="installation-dependencies" tabindex="-1">Installation dependencies <a class="header-anchor" href="#installation-dependencies" aria-label="Permalink to &quot;Installation dependencies&quot;"></a></h3><p>The project adopts a dependency <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> The package manager for management requires <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> environment. You can use npm, pnpm, or yarn to install dependencies.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Root dir run</span></span>
import{P as t,a as n}from"./chunks/ProjectModuleExplain.Dp1DCvX1.js";import{c as i,a2 as o,G as a,j as d,a as r,o as l}from"./chunks/framework.Xx8dNX0P.js";const h=JSON.parse('{"title":"Local Development","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/more/local-development.md","filePath":"en-US/more/local-development.md","lastUpdated":1727028421000}'),c={name:"en-US/more/local-development.md"},b=Object.assign(c,{setup(s){return(u,e)=>(l(),i("div",null,[e[0]||(e[0]=o('<h1 id="local-development" tabindex="-1">Local Development <a class="header-anchor" href="#local-development" aria-label="Permalink to &quot;Local Development&quot;"></a></h1><h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-label="Permalink to &quot;Introduction&quot;"></a></h2><p>If you see this, you may be interested in improving the KLineChart core. Thank you <a href="https://github.com/fish2016" target="_blank" rel="noreferrer">@fish2016</a> This document was written.</p><h2 id="notice" tabindex="-1">Notice <a class="header-anchor" href="#notice" aria-label="Permalink to &quot;Notice&quot;"></a></h2><h3 id="file-directory-description" tabindex="-1">File directory description <a class="header-anchor" href="#file-directory-description" aria-label="Permalink to &quot;File directory description&quot;"></a></h3>',5)),a(t),e[1]||(e[1]=d("h3",{id:"module-dependencies",tabindex:"-1"},[r("Module dependencies "),d("a",{class:"header-anchor",href:"#module-dependencies","aria-label":'Permalink to "Module dependencies"'},"")],-1)),a(n),e[2]||(e[2]=o(`<p>The above diagram shows the hierarchy of chart modules from top to bottom, with the lower layer serving as the upper layer container.</p><ul><li><code>Figure</code> Basic shapes, such as circle, polygon, rect, text, etc.</li><li><code>View</code> Retrieve data from <code>ChartStore</code> and perform single business plotting, such as candlesticks, area, grid line, crosshair, indicator, etc</li><li><code>Widget</code> Create canvas and assemble the relevant <code>View</code> together.</li><li><code>Pane</code> Create dom container and assemble the <code>Widget</code> together.</li><li><code>Chart</code> 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 <code>ChartStore</code> and notify subordinate components to update as needed.</li></ul><h2 id="development" tabindex="-1">Development <a class="header-anchor" href="#development" aria-label="Permalink to &quot;Development&quot;"></a></h2><h3 id="installation-dependencies" tabindex="-1">Installation dependencies <a class="header-anchor" href="#installation-dependencies" aria-label="Permalink to &quot;Installation dependencies&quot;"></a></h3><p>The project adopts a dependency <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> The package manager for management requires <a href="https://nodejs.org" target="_blank" rel="noreferrer">Node.js</a> environment. You can use npm, pnpm, or yarn to install dependencies.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Root dir run</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span></code></pre></div><h3 id="npm-execute-command-description" tabindex="-1">NPM Execute command description <a class="header-anchor" href="#npm-execute-command-description" aria-label="Permalink to &quot;NPM Execute command description&quot;"></a></h3><ul><li><code>lint</code>: Run <code>npm run lint</code> verify code rules.</li><li><code>clean</code>: Run <code>npm run clean</code> clean up the built files.</li><li><code>build-esm</code>: Run <code>npm run build-esm</code> built esm module.</li><li><code>build-cjs</code>: Run <code>npm run build-cjs</code> built commonjs module.</li><li><code>build-umd:dev</code>: Run <code>npm run build-umd:dev</code> built umd development module.</li><li><code>build-umd:prod</code>: Run <code>npm run build-umd:dev</code> built umd production module.</li><li><code>build-umd</code>: Run <code>npm run build-umd</code> built umd development and production module</li><li><code>build-core</code>: Run <code>npm run build-core</code> built esm, commonjs umd development and umd production module.</li><li><code>build-dts</code>: Run <code>npm run build-dts</code> generate typescript dependency files.</li><li><code>build</code>: Run <code>npm run build</code> built esm, commonjs umd development and umd production module and generate typescript dependency files.</li></ul><h3 id="debug" tabindex="-1">Debug <a class="header-anchor" href="#debug" aria-label="Permalink to &quot;Debug&quot;"></a></h3><p>This project does not have a debugging project and requires the creation of a new project, use <code>npm link</code> importor import <code>index.ts</code> debug. You can use <a href="https://vitejs.dev/" target="_blank" rel="noreferrer">vite</a> create a project.</p>`,10))]))}});export{h as __pageData,b as default};

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
import{_ as a}from"./chunks/index.CaYLe1Bq.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Basic","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/basic.md","filePath":"en-US/sample/basic.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/basic.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"basic",tabindex:"-1"},[h("Basic "),i("a",{class:"header-anchor",href:"#basic","aria-label":'Permalink to "Basic"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-mAsZ-" id="tab-UjkdSkk" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-UjkdSkk"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-mAsZ-" id="tab-GLjZrKM"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-GLjZrKM"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
import{_ as a}from"./chunks/index.Bv5r9K9d.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Basic","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/basic.md","filePath":"en-US/sample/basic.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/basic.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"basic",tabindex:"-1"},[h("Basic "),i("a",{class:"header-anchor",href:"#basic","aria-label":'Permalink to "Basic"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-j77Kg" id="tab-8It1S6Q" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-8It1S6Q"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-j77Kg" id="tab-peQoBYQ"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-peQoBYQ"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> genData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">timestamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basePrice </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5000</span></span>

View File

@ -1,4 +1,4 @@
import{_ as a}from"./chunks/index.CaYLe1Bq.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Basic","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/basic.md","filePath":"en-US/sample/basic.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/basic.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"basic",tabindex:"-1"},[h("Basic "),i("a",{class:"header-anchor",href:"#basic","aria-label":'Permalink to "Basic"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-mAsZ-" id="tab-UjkdSkk" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-UjkdSkk"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-mAsZ-" id="tab-GLjZrKM"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-GLjZrKM"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
import{_ as a}from"./chunks/index.Bv5r9K9d.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Basic","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/basic.md","filePath":"en-US/sample/basic.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/basic.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"basic",tabindex:"-1"},[h("Basic "),i("a",{class:"header-anchor",href:"#basic","aria-label":'Permalink to "Basic"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-j77Kg" id="tab-8It1S6Q" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-8It1S6Q"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-j77Kg" id="tab-peQoBYQ"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-peQoBYQ"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> genData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">timestamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basePrice </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5000</span></span>

View File

@ -1,4 +1,4 @@
import{_ as a}from"./chunks/index.CGPdH-pt.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Data","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/data.md","filePath":"en-US/sample/data.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/data.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"data",tabindex:"-1"},[h("Data "),i("a",{class:"header-anchor",href:"#data","aria-label":'Permalink to "Data"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-S3kHh" id="tab-Xphxbmu" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-Xphxbmu"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-S3kHh" id="tab-j9NEF_U"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-j9NEF_U"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
import{_ as a}from"./chunks/index.Cd-6fQte.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Data","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/data.md","filePath":"en-US/sample/data.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/data.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"data",tabindex:"-1"},[h("Data "),i("a",{class:"header-anchor",href:"#data","aria-label":'Permalink to "Data"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-gJ-hg" id="tab-eLyXm3w" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-eLyXm3w"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-gJ-hg" id="tab-1SjRtph"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-1SjRtph"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> genData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">timestamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basePrice </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5000</span></span>

View File

@ -1,4 +1,4 @@
import{_ as a}from"./chunks/index.CGPdH-pt.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"Data","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/data.md","filePath":"en-US/sample/data.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/data.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"data",tabindex:"-1"},[h("Data "),i("a",{class:"header-anchor",href:"#data","aria-label":'Permalink to "Data"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-S3kHh" id="tab-Xphxbmu" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-Xphxbmu"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-S3kHh" id="tab-j9NEF_U"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-j9NEF_U"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
import{_ as a}from"./chunks/index.Cd-6fQte.js";import{c as n,j as i,a as h,G as l,a2 as t,o as k}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"Data","description":"","frontmatter":{"aside":false,"editLink":false},"headers":[],"relativePath":"en-US/sample/data.md","filePath":"en-US/sample/data.md","lastUpdated":1727028421000}'),p={name:"en-US/sample/data.md"},y=Object.assign(p,{setup(e){return(r,s)=>(k(),n("div",null,[s[0]||(s[0]=i("h1",{id:"data",tabindex:"-1"},[h("Data "),i("a",{class:"header-anchor",href:"#data","aria-label":'Permalink to "Data"'},"")],-1)),l(a),s[1]||(s[1]=t(`<div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-gJ-hg" id="tab-eLyXm3w" checked><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 32 32&quot;&gt;&lt;path fill=&quot;#f5de19&quot; d=&quot;M2 2h28v28H2z&quot;/&gt;&lt;path d=&quot;M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z&quot;/&gt;&lt;/svg&gt;JavaScript" for="tab-eLyXm3w"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32 32"><path fill="#f5de19" d="M2 2h28v28H2z"></path><path d="M20.809 23.875a2.87 2.87 0 0 0 2.6 1.6c1.09 0 1.787-.545 1.787-1.3c0-.9-.716-1.222-1.916-1.747l-.658-.282c-1.9-.809-3.16-1.822-3.16-3.964c0-1.973 1.5-3.476 3.853-3.476a3.89 3.89 0 0 1 3.742 2.107L25 18.128A1.79 1.79 0 0 0 23.311 17a1.145 1.145 0 0 0-1.259 1.128c0 .789.489 1.109 1.618 1.6l.658.282c2.236.959 3.5 1.936 3.5 4.133c0 2.369-1.861 3.667-4.36 3.667a5.06 5.06 0 0 1-4.795-2.691Zm-9.295.228c.413.733.789 1.353 1.693 1.353c.864 0 1.41-.338 1.41-1.653v-8.947h2.631v8.982c0 2.724-1.6 3.964-3.929 3.964a4.085 4.085 0 0 1-3.947-2.4Z"></path></svg>JavaScript</label><input type="radio" name="group-gJ-hg" id="tab-1SjRtph"><label data-title="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16px&quot; height=&quot;16px&quot; viewBox=&quot;0 0 256 256&quot;&gt;&lt;g fill=&quot;none&quot;&gt;&lt;rect width=&quot;256&quot; height=&quot;256&quot; fill=&quot;#e14e1d&quot; rx=&quot;60&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z&quot;/&gt;&lt;path fill=&quot;#ebebeb&quot; d=&quot;M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;HTML" for="tab-1SjRtph"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#e14e1d" rx="60"></rect><path fill="#fff" d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z"></path><path fill="#ebebeb" d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z"></path></g></svg>HTML</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klinecharts&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> genData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">timestamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basePrice </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5000</span></span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
import{_ as e,a as s}from"./chunks/wechat_pay_qr_code.D_lYdydw.js";import{_ as t,c as o,a2 as n,o as i}from"./chunks/framework.Bh2a4ahF.js";const b=JSON.parse('{"title":"❤️ Sponsor","description":"","frontmatter":{"sidebar":false,"editLink":false,"lastUpdated":false},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),r={name:"en-US/sponsor.md"};function l(p,a,c,h,d,u){return i(),o("div",null,a[0]||(a[0]=[n('<h1 id="❤️-sponsor" tabindex="-1">❤️ Sponsor <a class="header-anchor" href="#❤️-sponsor" aria-label="Permalink to &quot;❤️ Sponsor&quot;"></a></h1><p>KLineChart under the Apache License V2 and completely free to use.</p><p>If you think the plugin is good, I hope you can click 🌟 on <a href="https://github.com/klinecharts/KLineChart" target="_blank" rel="noreferrer">GitHub</a>. If you can reward a cup of ☕️, that would be very much appreciated.</p><p>For organizations or individuals sponsoring KLineChart, no matter how much, if necessary, display the organization&#39;s official website or personal homepage on the <a href="https://klinecharts.com" target="_blank" rel="noreferrer">https://klinecharts.com</a> on the homepage, please provide payment account or address, logo, homepage link, and other information by sending an email to <a href="mailto:hu_li888@foxmail.com" target="_blank" rel="noreferrer">hu_li888@foxmail.com</a> . Those with sponsor amount top three, will use large logo display.</p><h2 id="sponsor-channels" tabindex="-1">Sponsor Channels <a class="header-anchor" href="#sponsor-channels" aria-label="Permalink to &quot;Sponsor Channels&quot;"></a></h2><h3 id="alipay" tabindex="-1">Alipay <a class="header-anchor" href="#alipay" aria-label="Permalink to &quot;Alipay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+e+'"><h3 id="wechat-pay" tabindex="-1">Wechat Pay <a class="header-anchor" href="#wechat-pay" aria-label="Permalink to &quot;Wechat Pay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+s+'"><h3 id="cryptocurrency" tabindex="-1">Cryptocurrency <a class="header-anchor" href="#cryptocurrency" aria-label="Permalink to &quot;Cryptocurrency&quot;"></a></h3><ul><li>BTC</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>bc1qnwzukszzk5xfk0zs3sr8etzgctgnrtqts43jzp3khe6gm7xazprsp4y6n3</span></span></code></pre></div><ul><li>ETH</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-ERC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-TRC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>THJpTQmFGaVm12KE1Jzc5mLXiApP6qXMCi</span></span></code></pre></div>',18)]))}const y=t(r,[["render",l]]);export{b as __pageData,y as default};
import{_ as e,a as s}from"./chunks/wechat_pay_qr_code.D_lYdydw.js";import{_ as t,c as o,a2 as n,o as i}from"./chunks/framework.Xx8dNX0P.js";const b=JSON.parse('{"title":"❤️ Sponsor","description":"","frontmatter":{"sidebar":false,"editLink":false,"lastUpdated":false},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),r={name:"en-US/sponsor.md"};function l(p,a,c,h,d,u){return i(),o("div",null,a[0]||(a[0]=[n('<h1 id="❤️-sponsor" tabindex="-1">❤️ Sponsor <a class="header-anchor" href="#❤️-sponsor" aria-label="Permalink to &quot;❤️ Sponsor&quot;"></a></h1><p>KLineChart under the Apache License V2 and completely free to use.</p><p>If you think the plugin is good, I hope you can click 🌟 on <a href="https://github.com/klinecharts/KLineChart" target="_blank" rel="noreferrer">GitHub</a>. If you can reward a cup of ☕️, that would be very much appreciated.</p><p>For organizations or individuals sponsoring KLineChart, no matter how much, if necessary, display the organization&#39;s official website or personal homepage on the <a href="https://klinecharts.com" target="_blank" rel="noreferrer">https://klinecharts.com</a> on the homepage, please provide payment account or address, logo, homepage link, and other information by sending an email to <a href="mailto:hu_li888@foxmail.com" target="_blank" rel="noreferrer">hu_li888@foxmail.com</a> . Those with sponsor amount top three, will use large logo display.</p><h2 id="sponsor-channels" tabindex="-1">Sponsor Channels <a class="header-anchor" href="#sponsor-channels" aria-label="Permalink to &quot;Sponsor Channels&quot;"></a></h2><h3 id="alipay" tabindex="-1">Alipay <a class="header-anchor" href="#alipay" aria-label="Permalink to &quot;Alipay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+e+'"><h3 id="wechat-pay" tabindex="-1">Wechat Pay <a class="header-anchor" href="#wechat-pay" aria-label="Permalink to &quot;Wechat Pay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+s+'"><h3 id="cryptocurrency" tabindex="-1">Cryptocurrency <a class="header-anchor" href="#cryptocurrency" aria-label="Permalink to &quot;Cryptocurrency&quot;"></a></h3><ul><li>BTC</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>bc1qnwzukszzk5xfk0zs3sr8etzgctgnrtqts43jzp3khe6gm7xazprsp4y6n3</span></span></code></pre></div><ul><li>ETH</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-ERC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-TRC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>THJpTQmFGaVm12KE1Jzc5mLXiApP6qXMCi</span></span></code></pre></div>',18)]))}const y=t(r,[["render",l]]);export{b as __pageData,y as default};

View File

@ -1 +1 @@
import{_ as e,a as s}from"./chunks/wechat_pay_qr_code.D_lYdydw.js";import{_ as t,c as o,a2 as n,o as i}from"./chunks/framework.Bh2a4ahF.js";const b=JSON.parse('{"title":"❤️ Sponsor","description":"","frontmatter":{"sidebar":false,"editLink":false,"lastUpdated":false},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),r={name:"en-US/sponsor.md"};function l(p,a,c,h,d,u){return i(),o("div",null,a[0]||(a[0]=[n('<h1 id="❤️-sponsor" tabindex="-1">❤️ Sponsor <a class="header-anchor" href="#❤️-sponsor" aria-label="Permalink to &quot;❤️ Sponsor&quot;"></a></h1><p>KLineChart under the Apache License V2 and completely free to use.</p><p>If you think the plugin is good, I hope you can click 🌟 on <a href="https://github.com/klinecharts/KLineChart" target="_blank" rel="noreferrer">GitHub</a>. If you can reward a cup of ☕️, that would be very much appreciated.</p><p>For organizations or individuals sponsoring KLineChart, no matter how much, if necessary, display the organization&#39;s official website or personal homepage on the <a href="https://klinecharts.com" target="_blank" rel="noreferrer">https://klinecharts.com</a> on the homepage, please provide payment account or address, logo, homepage link, and other information by sending an email to <a href="mailto:hu_li888@foxmail.com" target="_blank" rel="noreferrer">hu_li888@foxmail.com</a> . Those with sponsor amount top three, will use large logo display.</p><h2 id="sponsor-channels" tabindex="-1">Sponsor Channels <a class="header-anchor" href="#sponsor-channels" aria-label="Permalink to &quot;Sponsor Channels&quot;"></a></h2><h3 id="alipay" tabindex="-1">Alipay <a class="header-anchor" href="#alipay" aria-label="Permalink to &quot;Alipay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+e+'"><h3 id="wechat-pay" tabindex="-1">Wechat Pay <a class="header-anchor" href="#wechat-pay" aria-label="Permalink to &quot;Wechat Pay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+s+'"><h3 id="cryptocurrency" tabindex="-1">Cryptocurrency <a class="header-anchor" href="#cryptocurrency" aria-label="Permalink to &quot;Cryptocurrency&quot;"></a></h3><ul><li>BTC</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>bc1qnwzukszzk5xfk0zs3sr8etzgctgnrtqts43jzp3khe6gm7xazprsp4y6n3</span></span></code></pre></div><ul><li>ETH</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-ERC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-TRC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>THJpTQmFGaVm12KE1Jzc5mLXiApP6qXMCi</span></span></code></pre></div>',18)]))}const y=t(r,[["render",l]]);export{b as __pageData,y as default};
import{_ as e,a as s}from"./chunks/wechat_pay_qr_code.D_lYdydw.js";import{_ as t,c as o,a2 as n,o as i}from"./chunks/framework.Xx8dNX0P.js";const b=JSON.parse('{"title":"❤️ Sponsor","description":"","frontmatter":{"sidebar":false,"editLink":false,"lastUpdated":false},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),r={name:"en-US/sponsor.md"};function l(p,a,c,h,d,u){return i(),o("div",null,a[0]||(a[0]=[n('<h1 id="❤️-sponsor" tabindex="-1">❤️ Sponsor <a class="header-anchor" href="#❤️-sponsor" aria-label="Permalink to &quot;❤️ Sponsor&quot;"></a></h1><p>KLineChart under the Apache License V2 and completely free to use.</p><p>If you think the plugin is good, I hope you can click 🌟 on <a href="https://github.com/klinecharts/KLineChart" target="_blank" rel="noreferrer">GitHub</a>. If you can reward a cup of ☕️, that would be very much appreciated.</p><p>For organizations or individuals sponsoring KLineChart, no matter how much, if necessary, display the organization&#39;s official website or personal homepage on the <a href="https://klinecharts.com" target="_blank" rel="noreferrer">https://klinecharts.com</a> on the homepage, please provide payment account or address, logo, homepage link, and other information by sending an email to <a href="mailto:hu_li888@foxmail.com" target="_blank" rel="noreferrer">hu_li888@foxmail.com</a> . Those with sponsor amount top three, will use large logo display.</p><h2 id="sponsor-channels" tabindex="-1">Sponsor Channels <a class="header-anchor" href="#sponsor-channels" aria-label="Permalink to &quot;Sponsor Channels&quot;"></a></h2><h3 id="alipay" tabindex="-1">Alipay <a class="header-anchor" href="#alipay" aria-label="Permalink to &quot;Alipay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+e+'"><h3 id="wechat-pay" tabindex="-1">Wechat Pay <a class="header-anchor" href="#wechat-pay" aria-label="Permalink to &quot;Wechat Pay&quot;"></a></h3><img style="width:180px;margin-top:10px;" src="'+s+'"><h3 id="cryptocurrency" tabindex="-1">Cryptocurrency <a class="header-anchor" href="#cryptocurrency" aria-label="Permalink to &quot;Cryptocurrency&quot;"></a></h3><ul><li>BTC</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>bc1qnwzukszzk5xfk0zs3sr8etzgctgnrtqts43jzp3khe6gm7xazprsp4y6n3</span></span></code></pre></div><ul><li>ETH</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-ERC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>0xd2c3911654db861e0a2e17415e11a209c1fc3594</span></span></code></pre></div><ul><li>USDT-TRC20</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>THJpTQmFGaVm12KE1Jzc5mLXiApP6qXMCi</span></span></code></pre></div>',18)]))}const y=t(r,[["render",l]]);export{b as __pageData,y as default};

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
import{_ as e,B as p,c as k,a2 as n,j as i,a,G as t,w as h,o as r}from"./chunks/framework.Bh2a4ahF.js";const m=JSON.parse('{"title":"图表API","description":"","frontmatter":{},"headers":[],"relativePath":"guide/chart-api.md","filePath":"guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},y={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},o={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,C){const l=p("Badge");return r(),k("div",null,[s[48]||(s[48]=n(`<h1 id="图表api" tabindex="-1">图表API <a class="header-anchor" href="#图表api" aria-label="Permalink to &quot;图表API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
import{_ as e,B as p,c as k,a2 as n,j as i,a,G as t,w as h,o as r}from"./chunks/framework.Xx8dNX0P.js";const m=JSON.parse('{"title":"图表API","description":"","frontmatter":{},"headers":[],"relativePath":"guide/chart-api.md","filePath":"guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},y={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},o={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,C){const l=p("Badge");return r(),k("div",null,[s[48]||(s[48]=n(`<h1 id="图表api" tabindex="-1">图表API <a class="header-anchor" href="#图表api" aria-label="Permalink to &quot;图表API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ds: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout?: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Array</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{</span></span>

View File

@ -1,4 +1,4 @@
import{_ as e,B as p,c as k,a2 as n,j as i,a,G as t,w as h,o as r}from"./chunks/framework.Bh2a4ahF.js";const m=JSON.parse('{"title":"图表API","description":"","frontmatter":{},"headers":[],"relativePath":"guide/chart-api.md","filePath":"guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},y={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},o={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,C){const l=p("Badge");return r(),k("div",null,[s[48]||(s[48]=n(`<h1 id="图表api" tabindex="-1">图表API <a class="header-anchor" href="#图表api" aria-label="Permalink to &quot;图表API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
import{_ as e,B as p,c as k,a2 as n,j as i,a,G as t,w as h,o as r}from"./chunks/framework.Xx8dNX0P.js";const m=JSON.parse('{"title":"图表API","description":"","frontmatter":{},"headers":[],"relativePath":"guide/chart-api.md","filePath":"guide/chart-api.md","lastUpdated":1717605084000}'),d={name:"guide/chart-api.md"},E={id:"registerxaxis-axis-9-8-0",tabindex:"-1"},g={id:"registeryaxis-axis-9-8-0",tabindex:"-1"},y={id:"utils-formatfolddecimal-value-threshold-9-8-0",tabindex:"-1"},o={id:"utils-calctextwidth-text-size-weight-family-9-3-0",tabindex:"-1"};function c(F,s,u,b,A,C){const l=p("Badge");return r(),k("div",null,[s[48]||(s[48]=n(`<h1 id="图表api" tabindex="-1">图表API <a class="header-anchor" href="#图表api" aria-label="Permalink to &quot;图表API&quot;"></a></h1><h2 id="init-ds-options" tabindex="-1">init(ds, options) <a class="header-anchor" href="#init-ds-options" aria-label="Permalink to &quot;init(ds, options)&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ds: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout?: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Array</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;{</span></span>

View File

@ -1,4 +1,4 @@
import{_ as p,B as l,c as h,j as a,a as i,G as t,w as k,a2 as e,o as r}from"./chunks/framework.Bh2a4ahF.js";const m=JSON.parse('{"title":"自定义坐标轴 ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"guide/custom-axis.md","filePath":"guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"guide/custom-axis.md"},E={id:"自定义坐标轴-9-8-0",tabindex:"-1"};function g(y,s,c,F,o,A){const n=l("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("自定义坐标轴 ")),t(n,null,{default:k(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#自定义坐标轴-9-8-0","aria-label":'Permalink to "自定义坐标轴 <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=e(`<p>图表支持自定义坐标轴,可以通过图表方法 <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> 和 <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a> 来实现。</p><h2 id="入参说明" tabindex="-1">入参说明 <a class="header-anchor" href="#入参说明" aria-label="Permalink to &quot;入参说明&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as p,B as l,c as h,j as a,a as i,G as t,w as k,a2 as e,o as r}from"./chunks/framework.Xx8dNX0P.js";const m=JSON.parse('{"title":"自定义坐标轴 ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"guide/custom-axis.md","filePath":"guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"guide/custom-axis.md"},E={id:"自定义坐标轴-9-8-0",tabindex:"-1"};function g(y,s,c,F,o,A){const n=l("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("自定义坐标轴 ")),t(n,null,{default:k(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#自定义坐标轴-9-8-0","aria-label":'Permalink to "自定义坐标轴 <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=e(`<p>图表支持自定义坐标轴,可以通过图表方法 <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> 和 <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a> 来实现。</p><h2 id="入参说明" tabindex="-1">入参说明 <a class="header-anchor" href="#入参说明" aria-label="Permalink to &quot;入参说明&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 坐标轴名字</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 创建分割文字方法实现</span></span>

View File

@ -1,4 +1,4 @@
import{_ as p,B as l,c as h,j as a,a as i,G as t,w as k,a2 as e,o as r}from"./chunks/framework.Bh2a4ahF.js";const m=JSON.parse('{"title":"自定义坐标轴 ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"guide/custom-axis.md","filePath":"guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"guide/custom-axis.md"},E={id:"自定义坐标轴-9-8-0",tabindex:"-1"};function g(y,s,c,F,o,A){const n=l("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("自定义坐标轴 ")),t(n,null,{default:k(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#自定义坐标轴-9-8-0","aria-label":'Permalink to "自定义坐标轴 <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=e(`<p>图表支持自定义坐标轴,可以通过图表方法 <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> 和 <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a> 来实现。</p><h2 id="入参说明" tabindex="-1">入参说明 <a class="header-anchor" href="#入参说明" aria-label="Permalink to &quot;入参说明&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as p,B as l,c as h,j as a,a as i,G as t,w as k,a2 as e,o as r}from"./chunks/framework.Xx8dNX0P.js";const m=JSON.parse('{"title":"自定义坐标轴 ^9.8.0","description":"","frontmatter":{},"headers":[],"relativePath":"guide/custom-axis.md","filePath":"guide/custom-axis.md","lastUpdated":1712423256000}'),d={name:"guide/custom-axis.md"},E={id:"自定义坐标轴-9-8-0",tabindex:"-1"};function g(y,s,c,F,o,A){const n=l("Badge");return r(),h("div",null,[a("h1",E,[s[1]||(s[1]=i("自定义坐标轴 ")),t(n,null,{default:k(()=>s[0]||(s[0]=[i("^9.8.0")])),_:1}),s[2]||(s[2]=i()),s[3]||(s[3]=a("a",{class:"header-anchor",href:"#自定义坐标轴-9-8-0","aria-label":'Permalink to "自定义坐标轴 <Badge>^9.8.0</Badge>"'},"",-1))]),s[4]||(s[4]=e(`<p>图表支持自定义坐标轴,可以通过图表方法 <a href="./chart-api#registerxaxis-axis">registerXAxis(axis)</a> 和 <a href="./chart-api#registeryaxis-axis">registerYAxis(axis)</a> 来实现。</p><h2 id="入参说明" tabindex="-1">入参说明 <a class="header-anchor" href="#入参说明" aria-label="Permalink to &quot;入参说明&quot;"></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 坐标轴名字</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: string</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 创建分割文字方法实现</span></span>

View File

@ -1,4 +1,4 @@
import{_ as a,c as i,a2 as n,o as t}from"./chunks/framework.Bh2a4ahF.js";const o=JSON.parse('{"title":"📚 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/data-source.md","filePath":"guide/data-source.md","lastUpdated":1713540760000}'),e={name:"guide/data-source.md"};function p(l,s,h,k,r,d){return t(),i("div",null,s[0]||(s[0]=[n(`<h1 id="📚-数据" tabindex="-1">📚 数据 <a class="header-anchor" href="#📚-数据" aria-label="Permalink to &quot;📚 数据&quot;"></a></h1><p>图表所需要的数据必须是固定格式。通过图表实例 API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a><a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a>和<a href="./instance-api#updatedatadata">updateData(data)</a>来和图表进行数据交互。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as a,c as i,a2 as n,o as t}from"./chunks/framework.Xx8dNX0P.js";const o=JSON.parse('{"title":"📚 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/data-source.md","filePath":"guide/data-source.md","lastUpdated":1713540760000}'),e={name:"guide/data-source.md"};function p(l,s,h,k,r,d){return t(),i("div",null,s[0]||(s[0]=[n(`<h1 id="📚-数据" tabindex="-1">📚 数据 <a class="header-anchor" href="#📚-数据" aria-label="Permalink to &quot;📚 数据&quot;"></a></h1><p>图表所需要的数据必须是固定格式。通过图表实例 API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a><a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a>和<a href="./instance-api#updatedatadata">updateData(data)</a>来和图表进行数据交互。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 时间戳,毫秒级别,必要字段</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> timestamp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 开盘价,必要字段</span></span>

View File

@ -1,4 +1,4 @@
import{_ as a,c as i,a2 as n,o as t}from"./chunks/framework.Bh2a4ahF.js";const o=JSON.parse('{"title":"📚 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/data-source.md","filePath":"guide/data-source.md","lastUpdated":1713540760000}'),e={name:"guide/data-source.md"};function p(l,s,h,k,r,d){return t(),i("div",null,s[0]||(s[0]=[n(`<h1 id="📚-数据" tabindex="-1">📚 数据 <a class="header-anchor" href="#📚-数据" aria-label="Permalink to &quot;📚 数据&quot;"></a></h1><p>图表所需要的数据必须是固定格式。通过图表实例 API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a><a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a>和<a href="./instance-api#updatedatadata">updateData(data)</a>来和图表进行数据交互。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
import{_ as a,c as i,a2 as n,o as t}from"./chunks/framework.Xx8dNX0P.js";const o=JSON.parse('{"title":"📚 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/data-source.md","filePath":"guide/data-source.md","lastUpdated":1713540760000}'),e={name:"guide/data-source.md"};function p(l,s,h,k,r,d){return t(),i("div",null,s[0]||(s[0]=[n(`<h1 id="📚-数据" tabindex="-1">📚 数据 <a class="header-anchor" href="#📚-数据" aria-label="Permalink to &quot;📚 数据&quot;"></a></h1><p>图表所需要的数据必须是固定格式。通过图表实例 API <a href="./instance-api#applynewdata-datalist-more">applyNewData(dataList, more)</a><a href="./instance-api#applymoredatadatalist-more">applyMoreData(dataList, more)</a>和<a href="./instance-api#updatedatadata">updateData(data)</a>来和图表进行数据交互。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 时间戳,毫秒级别,必要字段</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> timestamp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: number</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 开盘价,必要字段</span></span>

View File

@ -1,4 +1,4 @@
import{_ as s,c as i,a2 as t,o as e}from"./chunks/framework.Bh2a4ahF.js";const c=JSON.parse('{"title":"🏝️ 环境要求","description":"","frontmatter":{},"headers":[],"relativePath":"guide/environment.md","filePath":"guide/environment.md","lastUpdated":1679066795000}'),n={name:"guide/environment.md"};function l(h,a,r,p,o,k){return e(),i("div",null,a[0]||(a[0]=[t(`<h1 id="🏝️-环境要求" tabindex="-1">🏝️ 环境要求 <a class="header-anchor" href="#🏝️-环境要求" aria-label="Permalink to &quot;🏝️ 环境要求&quot;"></a></h1><h2 id="浏览器支持" tabindex="-1">浏览器支持 <a class="header-anchor" href="#浏览器支持" aria-label="Permalink to &quot;浏览器支持&quot;"></a></h2><p>图表基于 html5 canvas 构建,需要运行在支持 canvas 的浏览器上,如果需要运行在移动端,请用 webview 加载。</p><h2 id="兼容处理" tabindex="-1">兼容处理 <a class="header-anchor" href="#兼容处理" aria-label="Permalink to &quot;兼容处理&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>图表内部集合使用<code>Map</code>,用于兼容不支持的老版浏览器。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
import{_ as s,c as i,a2 as t,o as e}from"./chunks/framework.Xx8dNX0P.js";const c=JSON.parse('{"title":"🏝️ 环境要求","description":"","frontmatter":{},"headers":[],"relativePath":"guide/environment.md","filePath":"guide/environment.md","lastUpdated":1679066795000}'),n={name:"guide/environment.md"};function l(h,a,r,p,o,k){return e(),i("div",null,a[0]||(a[0]=[t(`<h1 id="🏝️-环境要求" tabindex="-1">🏝️ 环境要求 <a class="header-anchor" href="#🏝️-环境要求" aria-label="Permalink to &quot;🏝️ 环境要求&quot;"></a></h1><h2 id="浏览器支持" tabindex="-1">浏览器支持 <a class="header-anchor" href="#浏览器支持" aria-label="Permalink to &quot;浏览器支持&quot;"></a></h2><p>图表基于 html5 canvas 构建,需要运行在支持 canvas 的浏览器上,如果需要运行在移动端,请用 webview 加载。</p><h2 id="兼容处理" tabindex="-1">兼容处理 <a class="header-anchor" href="#兼容处理" aria-label="Permalink to &quot;兼容处理&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>图表内部集合使用<code>Map</code>,用于兼容不支持的老版浏览器。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="intl-js" tabindex="-1"><a href="https://github.com/andyearnshaw/Intl.js" target="_blank" rel="noreferrer">Intl.js</a> <a class="header-anchor" href="#intl-js" aria-label="Permalink to &quot;[Intl.js](https://github.com/andyearnshaw/Intl.js)&quot;"></a></h3><p><code>Intl</code> API</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl/local-data/jsonp/en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div>`,10)]))}const g=s(n,[["render",l]]);export{c as __pageData,g as default};

View File

@ -1,4 +1,4 @@
import{_ as s,c as i,a2 as t,o as e}from"./chunks/framework.Bh2a4ahF.js";const c=JSON.parse('{"title":"🏝️ 环境要求","description":"","frontmatter":{},"headers":[],"relativePath":"guide/environment.md","filePath":"guide/environment.md","lastUpdated":1679066795000}'),n={name:"guide/environment.md"};function l(h,a,r,p,o,k){return e(),i("div",null,a[0]||(a[0]=[t(`<h1 id="🏝️-环境要求" tabindex="-1">🏝️ 环境要求 <a class="header-anchor" href="#🏝️-环境要求" aria-label="Permalink to &quot;🏝️ 环境要求&quot;"></a></h1><h2 id="浏览器支持" tabindex="-1">浏览器支持 <a class="header-anchor" href="#浏览器支持" aria-label="Permalink to &quot;浏览器支持&quot;"></a></h2><p>图表基于 html5 canvas 构建,需要运行在支持 canvas 的浏览器上,如果需要运行在移动端,请用 webview 加载。</p><h2 id="兼容处理" tabindex="-1">兼容处理 <a class="header-anchor" href="#兼容处理" aria-label="Permalink to &quot;兼容处理&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>图表内部集合使用<code>Map</code>,用于兼容不支持的老版浏览器。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
import{_ as s,c as i,a2 as t,o as e}from"./chunks/framework.Xx8dNX0P.js";const c=JSON.parse('{"title":"🏝️ 环境要求","description":"","frontmatter":{},"headers":[],"relativePath":"guide/environment.md","filePath":"guide/environment.md","lastUpdated":1679066795000}'),n={name:"guide/environment.md"};function l(h,a,r,p,o,k){return e(),i("div",null,a[0]||(a[0]=[t(`<h1 id="🏝️-环境要求" tabindex="-1">🏝️ 环境要求 <a class="header-anchor" href="#🏝️-环境要求" aria-label="Permalink to &quot;🏝️ 环境要求&quot;"></a></h1><h2 id="浏览器支持" tabindex="-1">浏览器支持 <a class="header-anchor" href="#浏览器支持" aria-label="Permalink to &quot;浏览器支持&quot;"></a></h2><p>图表基于 html5 canvas 构建,需要运行在支持 canvas 的浏览器上,如果需要运行在移动端,请用 webview 加载。</p><h2 id="兼容处理" tabindex="-1">兼容处理 <a class="header-anchor" href="#兼容处理" aria-label="Permalink to &quot;兼容处理&quot;"></a></h2><h3 id="core-js" tabindex="-1"><a href="https://github.com/zloirock/core-js" target="_blank" rel="noreferrer">core.js</a> <a class="header-anchor" href="#core-js" aria-label="Permalink to &quot;[core.js](https://github.com/zloirock/core-js)&quot;"></a></h3><p>图表内部集合使用<code>Map</code>,用于兼容不支持的老版浏览器。</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;core.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="intl-js" tabindex="-1"><a href="https://github.com/andyearnshaw/Intl.js" target="_blank" rel="noreferrer">Intl.js</a> <a class="header-anchor" href="#intl-js" aria-label="Permalink to &quot;[Intl.js](https://github.com/andyearnshaw/Intl.js)&quot;"></a></h3><p><code>Intl</code> API</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;intl/local-data/jsonp/en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { init } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;klincharts&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div>`,10)]))}const g=s(n,[["render",l]]);export{c as __pageData,g as default};

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"基础图形","description":"","frontmatter":{},"headers":[],"relativePath":"guide/figure.md","filePath":"guide/figure.md","lastUpdated":1693193431000}'),h={name:"guide/figure.md"};function k(p,s,t,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="基础图形" tabindex="-1">基础图形 <a class="header-anchor" href="#基础图形" aria-label="Permalink to &quot;基础图形&quot;"></a></h1><p>基础图形是图表重要的组成部分,图表上所有的元素都是由基础图形组成,如果需要制作复杂的自定义技术指标和覆盖物,建议仔细阅读。这篇文档介绍了内置的基本图形和如何自定义一个基础图形。基础图形可以通过图表方法<code>klinecharts.getFigureClass(name)</code>获取。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">注意</p><p>需要在有画布上下文的情况下使用。</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取基础图形实例</span></span>
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"基础图形","description":"","frontmatter":{},"headers":[],"relativePath":"guide/figure.md","filePath":"guide/figure.md","lastUpdated":1693193431000}'),h={name:"guide/figure.md"};function k(p,s,t,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="基础图形" tabindex="-1">基础图形 <a class="header-anchor" href="#基础图形" aria-label="Permalink to &quot;基础图形&quot;"></a></h1><p>基础图形是图表重要的组成部分,图表上所有的元素都是由基础图形组成,如果需要制作复杂的自定义技术指标和覆盖物,建议仔细阅读。这篇文档介绍了内置的基本图形和如何自定义一个基础图形。基础图形可以通过图表方法<code>klinecharts.getFigureClass(name)</code>获取。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">注意</p><p>需要在有画布上下文的情况下使用。</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取基础图形实例</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// name为基础图形名字&#39;arc&#39;, &#39;circle&#39;等。</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Figure</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getFigureClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 实例化并绘制</span></span>

View File

@ -1,4 +1,4 @@
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Bh2a4ahF.js";const g=JSON.parse('{"title":"基础图形","description":"","frontmatter":{},"headers":[],"relativePath":"guide/figure.md","filePath":"guide/figure.md","lastUpdated":1693193431000}'),h={name:"guide/figure.md"};function k(p,s,t,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="基础图形" tabindex="-1">基础图形 <a class="header-anchor" href="#基础图形" aria-label="Permalink to &quot;基础图形&quot;"></a></h1><p>基础图形是图表重要的组成部分,图表上所有的元素都是由基础图形组成,如果需要制作复杂的自定义技术指标和覆盖物,建议仔细阅读。这篇文档介绍了内置的基本图形和如何自定义一个基础图形。基础图形可以通过图表方法<code>klinecharts.getFigureClass(name)</code>获取。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">注意</p><p>需要在有画布上下文的情况下使用。</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取基础图形实例</span></span>
import{_ as i,c as a,a2 as n,o as l}from"./chunks/framework.Xx8dNX0P.js";const g=JSON.parse('{"title":"基础图形","description":"","frontmatter":{},"headers":[],"relativePath":"guide/figure.md","filePath":"guide/figure.md","lastUpdated":1693193431000}'),h={name:"guide/figure.md"};function k(p,s,t,e,E,r){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="基础图形" tabindex="-1">基础图形 <a class="header-anchor" href="#基础图形" aria-label="Permalink to &quot;基础图形&quot;"></a></h1><p>基础图形是图表重要的组成部分,图表上所有的元素都是由基础图形组成,如果需要制作复杂的自定义技术指标和覆盖物,建议仔细阅读。这篇文档介绍了内置的基本图形和如何自定义一个基础图形。基础图形可以通过图表方法<code>klinecharts.getFigureClass(name)</code>获取。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to &quot;使用示例&quot;"></a></h2><div class="warning custom-block"><p class="custom-block-title">注意</p><p>需要在有画布上下文的情况下使用。</p></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取基础图形实例</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// name为基础图形名字&#39;arc&#39;, &#39;circle&#39;等。</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Figure</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> klinecharts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getFigureClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(name)</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 实例化并绘制</span></span>

Some files were not shown because too many files have changed in this diff Show More