簡介這份資源面向微信小程序開發(fā)者與股票行情應(yīng)用愛好者提供滬深及港股K線圖、走勢圖的完整實(shí)現(xiàn)方案并支持通達(dá)信語法解析適合具備一定前端基礎(chǔ)、希望在小程序內(nèi)搭建專業(yè)行情圖表的開發(fā)者參考。壓縮包共72個(gè)文件約1.14MB以JavaScript源碼為主輔以WXML、WXSS、JSON等小程序頁面與配置文件另含HTML、CSS演示頁、PNG圖標(biāo)素材及字體文件結(jié)構(gòu)覆蓋行情模塊用例、分時(shí)圖、歷史K線圖與公式解析等核心部分。目前已有1078人學(xué)習(xí)下載熱度較高。讀者可從中獲取小程序行情圖表的目錄組織方式、數(shù)據(jù)獲取與處理思路、圖表渲染與手勢交互實(shí)現(xiàn)以及通達(dá)信指標(biāo)公式的解析邏輯便于快速搭建或二次開發(fā)自己的股票分析小程序。1. 小程序里畫滬深港股K線為什么HQChart是繞不開的選項(xiàng)做過行情類小程序的人多半有過這種經(jīng)歷產(chǎn)品經(jīng)理丟過來一句“滬深和港股都要K線、分時(shí)、指標(biāo)全上最好還能寫通達(dá)信公式”你打開開發(fā)者工具發(fā)現(xiàn)Canvas畫蠟燭圖本身不難難的是后面那一長串——前復(fù)權(quán)除權(quán)缺口、港股半日市、指標(biāo)公式解析、十字光標(biāo)聯(lián)動(dòng)、雙指縮放慣性。自己從零擼一套兩周后大概率卡在“公式解析”和“性能”兩個(gè)黑匣子里。HQChart這類方案之所以被反復(fù)提起就是因?yàn)樗研星閳D這塊最難啃的部分做成了可配置的組件滬深、港股、美股、期貨都能接還內(nèi)置了一套接近通達(dá)信語法的公式引擎。這篇筆記就圍繞“微信小程序 滬深/港股K線 通達(dá)信語法”這條線把選型理由、接入步驟、參數(shù)配置和踩過的坑講清楚適合已經(jīng)會(huì)寫小程序、正準(zhǔn)備接行情圖的開發(fā)者也適合想評估這套方案值不值得投入的技術(shù)負(fù)責(zé)人。2. 拆開HQChart它到底替你做了哪些臟活2.1 行情圖的三層結(jié)構(gòu)與小程序的適配難點(diǎn)一套完整的行情圖拆開看是三層數(shù)據(jù)層負(fù)責(zé)K線、分時(shí)、盤口、指標(biāo)數(shù)據(jù)的獲取與緩存渲染層負(fù)責(zé)把數(shù)據(jù)畫成蠟燭、均線、成交量柱交互層負(fù)責(zé)縮放、拖動(dòng)、十字光標(biāo)、長按查看。自己寫的話渲染層用小程序Canvas 2D勉強(qiáng)能扛但交互層在移動(dòng)端要做慣性滾動(dòng)和雙指縮放幀率很容易掉到30以下。HQChart把這套東西封裝成組件內(nèi)部用離屏Canvas做預(yù)渲染把靜態(tài)部分和動(dòng)態(tài)部分分開滾動(dòng)時(shí)只重繪變化區(qū)域。它同時(shí)支持Web和小程序兩套渲染后端小程序端走的是Canvas 2D接口避開了舊版Canvas的諸多限制。這意味著你不需要自己去處理設(shè)備像素比、滾動(dòng)慣性、邊界回彈這些瑣碎但極耗時(shí)間的細(xì)節(jié)。2.2 通達(dá)信語法引擎公式不是字符串替換那么簡單很多人以為“支持通達(dá)信語法”就是把公式里的MA、EMA替換成JS函數(shù)實(shí)際遠(yuǎn)不止。通達(dá)信公式有一套自己的執(zhí)行模型變量按周期逐根計(jì)算REF、HHV、LLV這類函數(shù)依賴歷史序列跨周期引用還要處理數(shù)據(jù)對齊。HQChart的公式引擎把這些函數(shù)做成了內(nèi)置算子你傳入公式字符串它解析成語法樹后按K線序列逐根求值。常見指標(biāo)如MACD、KDJ、BOLL都有內(nèi)置實(shí)現(xiàn)自定義公式則通過配置項(xiàng)掛載。這里有個(gè)關(guān)鍵點(diǎn)公式里的參數(shù)如MA的周期需要你在配置里聲明引擎不會(huì)自動(dòng)推斷。港股和滬深在交易日歷上不同公式計(jì)算時(shí)如果數(shù)據(jù)序列有缺口結(jié)果會(huì)偏所以數(shù)據(jù)源必須保證連續(xù)性。2.3 滬深與港股的數(shù)據(jù)結(jié)構(gòu)差異滬深和港股在K線數(shù)據(jù)上最明顯的差異是交易時(shí)段和復(fù)權(quán)方式。滬深有集合競價(jià)、連續(xù)競價(jià)、午休港股還有半日市和臺(tái)風(fēng)休市。HQChart本身不提供數(shù)據(jù)它只負(fù)責(zé)畫數(shù)據(jù)要你自己從行情源拉。常見做法是后端統(tǒng)一轉(zhuǎn)成它要求的格式每根K線包含時(shí)間、開、高、低、收、成交量、成交額時(shí)間戳用毫秒。港股數(shù)據(jù)要注意時(shí)區(qū)建議統(tǒng)一轉(zhuǎn)成UTC8再傳入否則十字光標(biāo)顯示的時(shí)間會(huì)錯(cuò)位。復(fù)權(quán)方面前復(fù)權(quán)數(shù)據(jù)需要你在后端算好HQChart不做復(fù)權(quán)計(jì)算它只按你給的價(jià)格畫。如果你傳的是不復(fù)權(quán)數(shù)據(jù)除權(quán)日會(huì)出現(xiàn)巨大缺口用戶一眼就能看出來。3. 在小程序里跑通第一張K線圖從引入到渲染3.1 工程結(jié)構(gòu)與組件引入HQChart在小程序里的接入方式通常有兩種一種是把源碼包里的dist目錄拷貝到小程序工程用require引入另一種是把它封裝成自定義組件在頁面json里注冊。我一般用后者因?yàn)榻M件化后頁面邏輯更干凈。假設(shè)你已經(jīng)拿到了源碼包解壓后找到小程序?qū)Ｓ玫臉?gòu)建產(chǎn)物目錄結(jié)構(gòu)大致是hqchart.js、hqchart.wxss和一個(gè)示例頁面。把js和wxss放到工程的utils或components目錄下然后在頁面json里聲明組件。注意小程序?qū)Πw積有限制主包超過2M會(huì)報(bào)錯(cuò)所以建議把行情圖放在分包里或者用分包異步化加載。// page.json { usingComponents: { hq-chart: /components/hqchart/hqchart } }這段配置的作用是把HQChart注冊為當(dāng)前頁面可用的自定義組件。路徑要和你實(shí)際存放的位置一致大小寫敏感。如果組件內(nèi)部還依賴其他文件比如公式引擎的worker腳本要確保這些文件也被拷貝進(jìn)來否則運(yùn)行時(shí)會(huì)報(bào)模塊找不到。3.2 初始化配置滬深與港股的關(guān)鍵參數(shù)初始化是接入過程中最容易翻車的一步因?yàn)閰?shù)多且默認(rèn)值不一定適合你的場景。下面是一份我常用的配置骨架覆蓋了滬深和港股的基本需求。// page.js const config { // 類型0表示K線1表示分時(shí) type: 0, // 市場滬深用0港股用1具體以源碼包內(nèi)枚舉為準(zhǔn) market: 0, // 復(fù)權(quán)0不復(fù)權(quán)1前復(fù)權(quán)2后復(fù)權(quán) right: 1, // 周期0日線1周線2月線3分鐘線等 period: 0, // 指標(biāo)窗口可多個(gè) windows: [ { index: MA, name: 均線 }, { index: MACD, name: MACD } ], // 是否顯示成交量 showVolume: true, // 十字光標(biāo) crossCursor: { show: true }, // 縮放 zoom: { enable: true, max: 10, min: 1 } };這里每個(gè)參數(shù)都影響最終呈現(xiàn)。market決定內(nèi)部交易日歷和漲跌停顏色規(guī)則港股默認(rèn)是綠漲紅跌和滬深相反如果你不設(shè)置用戶會(huì)以為顏色錯(cuò)了。right控制復(fù)權(quán)前復(fù)權(quán)適合看歷史走勢后復(fù)權(quán)適合算收益。period決定數(shù)據(jù)粒度分鐘線需要你的數(shù)據(jù)源支持。windows里的index是公式引擎的內(nèi)置指標(biāo)名寫錯(cuò)會(huì)靜默失敗圖上是空的。crossCursor和zoom是交互開關(guān)移動(dòng)端建議都開。3.3 喂數(shù)據(jù)K線數(shù)組的格式與更新時(shí)機(jī)HQChart不主動(dòng)拉數(shù)據(jù)它通過回調(diào)或方法調(diào)用讓你把數(shù)據(jù)塞進(jìn)去。常見做法是在頁面onLoad時(shí)先請求一批歷史K線渲染出圖然后通過WebSocket或輪詢更新最后一根。數(shù)據(jù)格式要求是數(shù)組每項(xiàng)包含時(shí)間、開高低收、量額。下面是一個(gè)構(gòu)造示例。// 構(gòu)造K線數(shù)據(jù) function buildKLineData(rawList) { return rawList.map(item ({ time: item.timestamp, // 毫秒時(shí)間戳 open: item.open, high: item.high, low: item.low, close: item.close, volume: item.volume, amount: item.amount || 0 })); } // 頁面中調(diào)用 const chart this.selectComponent(#hqChart); chart.setData(buildKLineData(historyList));時(shí)間戳必須是毫秒秒級時(shí)間戳?xí)?dǎo)致時(shí)間軸錯(cuò)亂。volume和amount單位要統(tǒng)一港股有的數(shù)據(jù)源給的是股數(shù)有的是手?jǐn)?shù)傳錯(cuò)會(huì)導(dǎo)致成交量柱高度異常。更新最后一根K線時(shí)不要重新setData整個(gè)數(shù)組HQChart提供了updateLastData之類的方法只更新最后一根性能差別很大。如果數(shù)據(jù)源返回的K線時(shí)間不是連續(xù)的比如停牌日缺失HQChart會(huì)按索引畫不會(huì)自動(dòng)補(bǔ)缺口所以后端最好補(bǔ)齊或前端做映射。4. 通達(dá)信公式接入從寫公式到掛到指標(biāo)窗口4.1 公式引擎的調(diào)用方式與參數(shù)聲明HQChart的公式引擎通常通過一個(gè)全局對象暴露比如HQChart.Formula或類似命名。你傳入公式字符串和參數(shù)對象它返回計(jì)算后的序列。下面是一個(gè)自定義均線的例子。// 自定義公式兩條均線 const formula MA1:MA(CLOSE, N1); MA2:MA(CLOSE, N2);; const params { N1: 5, N2: 20 }; const result HQChart.Formula.Calculate(formula, kLineData, params); // result.MA1 和 result.MA2 是計(jì)算后的數(shù)組公式里的N1、N2必須在params里聲明否則引擎會(huì)當(dāng)成未定義變量計(jì)算結(jié)果全是NaN。公式末尾的分號不能少多行公式用分號分隔。返回的結(jié)果是按K線順序的數(shù)組長度和輸入數(shù)據(jù)一致。如果公式里用了REF、HHV這類依賴歷史的函數(shù)前幾根K線可能返回空值這是正常的畫圖時(shí)跳過即可。4.2 把公式掛到指標(biāo)窗口算出來的指標(biāo)要顯示在圖上需要配置到windows里。HQChart支持兩種方式一種是直接用內(nèi)置指標(biāo)名比如MACD、KDJ另一種是傳入自定義公式。自定義時(shí)windows的配置項(xiàng)要帶上公式字符串和參數(shù)。const customWindow { index: CUSTOM, name: 我的均線, formula: MA1:MA(CLOSE, N1); MA2:MA(CLOSE, N2);, params: { N1: 5, N2: 20 }, // 畫線樣式 lineStyle: [ { color: #FF0000, width: 1 }, { color: #0000FF, width: 1 } ] };index寫CUSTOM表示自定義name是顯示在窗口標(biāo)題上的文字。formula和params要和前面計(jì)算時(shí)一致否則圖上顯示的和實(shí)際算的對不上。lineStyle數(shù)組的順序?qū)?yīng)公式里輸出的順序MA1用第一個(gè)樣式MA2用第二個(gè)。如果公式輸出的是柱狀圖比如MACD的柱需要額外配置drawType為柱狀。4.3 港股公式計(jì)算的注意事項(xiàng)港股和滬深在公式計(jì)算上最大的差異是數(shù)據(jù)序列的連續(xù)性。港股有半日市下午只有兩小時(shí)交易如果你按固定根數(shù)取數(shù)據(jù)半日市那天的K線根數(shù)會(huì)少導(dǎo)致均線值偏移。解決辦法是在后端把半日市的數(shù)據(jù)補(bǔ)齊到正常交易時(shí)段或者在前端計(jì)算時(shí)按交易日歷對齊。另外港股的收盤價(jià)有時(shí)會(huì)有競價(jià)后的調(diào)整如果你用的數(shù)據(jù)源在收盤后更新了最后一根K線公式結(jié)果會(huì)變所以建議在收盤后固定一個(gè)時(shí)間點(diǎn)再算指標(biāo)避免盤中頻繁重算。5. 避坑與排查那些讓我加班到凌晨的細(xì)節(jié)5.1 圖表白屏或只顯示一半現(xiàn)象是頁面加載后圖表區(qū)域空白或者只畫了左邊一半。原因通常是Canvas尺寸沒拿到或者初始化時(shí)機(jī)太早。小程序的Canvas 2D需要等節(jié)點(diǎn)查詢完成后再操作如果在onLoad里直接初始化節(jié)點(diǎn)還沒掛載寬高是0。解決方法是把初始化放到onReady里或者用SelectorQuery拿到節(jié)點(diǎn)后再調(diào)chart.init。另一個(gè)原因是容器樣式?jīng)]給高度HQChart按容器高度算畫布高度為0自然畫不出來。5.2 十字光標(biāo)時(shí)間顯示錯(cuò)位移動(dòng)端長按出現(xiàn)十字光標(biāo)但顯示的時(shí)間比實(shí)際K線時(shí)間差了幾個(gè)小時(shí)。這是時(shí)區(qū)問題。滬深數(shù)據(jù)一般給的是本地時(shí)間港股數(shù)據(jù)可能給的是UTC或帶時(shí)區(qū)的時(shí)間戳。HQChart內(nèi)部按時(shí)間戳畫但顯示時(shí)用的是本地時(shí)區(qū)。解決辦法是統(tǒng)一在傳入前把時(shí)間轉(zhuǎn)成UTC8的毫秒時(shí)間戳或者配置時(shí)區(qū)偏移參數(shù)。如果數(shù)據(jù)源給的是字符串時(shí)間先轉(zhuǎn)成Date再取getTime不要直接parse不同設(shè)備對字符串解析結(jié)果不一致。5.3 公式計(jì)算結(jié)果全是NaN自定義公式掛上去后指標(biāo)窗口一片空白控制臺(tái)沒有報(bào)錯(cuò)。原因通常是參數(shù)沒聲明或者公式里用了引擎不支持的函數(shù)。先檢查params里是否包含了公式里所有變量再檢查函數(shù)名大小寫通達(dá)信函數(shù)一般是大寫但引擎可能只實(shí)現(xiàn)了部分。如果用了未來函數(shù)比如ZIG引擎可能直接返回空。排查方法是先用一個(gè)最簡單的公式MA(CLOSE,5)測試能出結(jié)果再逐步加復(fù)雜度。5.4 港股顏色反了港股默認(rèn)綠漲紅跌和滬深相反。如果你沒設(shè)置market參數(shù)HQChart按滬深規(guī)則畫用戶看到漲是紅色會(huì)以為數(shù)據(jù)錯(cuò)了。解決方法是初始化時(shí)把market設(shè)為港股對應(yīng)的枚舉值或者在配置里單獨(dú)指定漲跌顏色。有些版本還支持自定義顏色數(shù)組但要注意數(shù)組順序是漲在前還是跌在前不同版本可能不一樣最好查一下源碼包里的示例。5.5 包體積超限導(dǎo)致上傳失敗小程序主包限制2MHQChart的完整包加上公式引擎可能接近這個(gè)數(shù)。如果你還引入了其他庫很容易超。解決辦法是把行情圖相關(guān)代碼放到分包用分包預(yù)下載或異步加載。另外可以裁剪掉不需要的市場和指標(biāo)源碼包里通常有構(gòu)建腳本可以只打包滬深和港股去掉美股期貨。如果還是超檢查有沒有重復(fù)引入的polyfill小程序環(huán)境不需要那么多兼容代碼。6. 進(jìn)階讓K線圖更接近專業(yè)終端6.1 多指標(biāo)疊加與窗口聯(lián)動(dòng)專業(yè)終端里主圖疊加均線和BOLL副圖放MACD和KDJ窗口之間十字光標(biāo)聯(lián)動(dòng)。HQChart支持多窗口配置windows數(shù)組即可。聯(lián)動(dòng)需要開啟crossCursor的link屬性這樣在一個(gè)窗口移動(dòng)光標(biāo)其他窗口會(huì)同步顯示同一時(shí)間點(diǎn)的值。實(shí)現(xiàn)上你需要在配置里把link設(shè)為true并確保所有窗口的數(shù)據(jù)長度一致。如果某個(gè)窗口數(shù)據(jù)短了聯(lián)動(dòng)會(huì)錯(cuò)位。6.2 用公式做條件選股與標(biāo)記通達(dá)信公式不僅能畫線還能做條件判斷。比如你想在圖上標(biāo)記金叉點(diǎn)可以寫一個(gè)返回0和1的公式然后在HQChart里配置成標(biāo)記點(diǎn)。常見做法是公式輸出一個(gè)序列值為1時(shí)畫圖標(biāo)。HQChart支持自定義繪制回調(diào)你可以在回調(diào)里根據(jù)公式結(jié)果畫三角形或圓點(diǎn)。這個(gè)功能適合做回測可視化但要注意性能標(biāo)記點(diǎn)太多會(huì)拖慢渲染。6.3 性能調(diào)優(yōu)數(shù)據(jù)量與幀率K線根數(shù)超過2000根后滾動(dòng)會(huì)開始掉幀。優(yōu)化手段有幾個(gè)一是限制返回的K線數(shù)量一般看盤500到1000根足夠需要更多時(shí)用分頁加載二是關(guān)閉不必要的動(dòng)畫比如縮放時(shí)的緩動(dòng)三是用HQChart提供的setOption動(dòng)態(tài)調(diào)整渲染精度比如滾動(dòng)時(shí)降低采樣停止后再恢復(fù)。我一般會(huì)在配置里把maxDataCount設(shè)為1000超過就截?cái)嘤脩敉赝蠒r(shí)再請求更早的數(shù)據(jù)。6.4 一個(gè)我常備的排查習(xí)慣每次接入新數(shù)據(jù)源我會(huì)先寫一個(gè)最小頁面只畫20根K線不帶任何指標(biāo)確認(rèn)渲染和交互正常后再逐步加公式和窗口。這樣出問題時(shí)能快速定位是數(shù)據(jù)格式、配置還是引擎本身。另外HQChart的源碼包里通常有示例頁面遇到不確定的參數(shù)直接翻示例比查文檔快。最后提醒一句行情數(shù)據(jù)有延遲展示時(shí)最好在角落標(biāo)一下數(shù)據(jù)時(shí)間避免用戶誤判。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取