HQChart使用教程92-如何創(chuàng)建分筆明細(xì)表

• 成交明細(xì)
• 初始化成交明細(xì)
• Option的配置項(xiàng)說(shuō)明
• • Type
  • Symbol
  • IsAutoUpdate
  • AutoUpdateFrequency
  • Column
  • • Type
    • • 序號(hào)列
      • 多柱子列
      • 中心柱子
      • 自定義字段
    • Title
    • TextAlign
    • DataIndex
  • Border
  • IsSingleTable
  • IsShowHeader
  • KeyDown
  • Wheel
• 配色
• 數(shù)據(jù)篩選
• • 數(shù)據(jù)篩選事件
  • 打開(kāi)|關(guān)閉數(shù)據(jù)篩選功能
• 第3方數(shù)據(jù)對(duì)接教程
• QQ群: 950092318
• HQChart代碼地址

成交明細(xì)

鍵盤支持
Up/Down 翻頁(yè)
滾軸上下 翻頁(yè)

注意 目前成交明細(xì)只支持PC頁(yè)面。

初始化成交明細(xì)

<div id="deal" style="width: 900px;height:400px;"></div> ............ var chart=JSDealChart.Init(document.getElementById('deal')); //把成交明細(xì)圖綁定到一個(gè)Div上

vue

<div class='hqchart' id="hqchart" ref="hqchart"></div> ............import HQChart from 'hqchart' import 'hqchart/src/jscommon/umychart.resource/css/tools.css' import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css' .............var chart=HQChart.Chart..JSDealChart.Init(this.$refs.hqchart); chart.SetOption(this.Option);

Option的配置項(xiàng)說(shuō)明

分筆明細(xì)表設(shè)置是通過(guò)Option來(lái)配置的。
下面是一個(gè)配置例子

this.Option= {Type:'成交明細(xì)', //創(chuàng)建圖形類型Symbol:'600000.sh',IsAutoUpdate:true, //是自動(dòng)更新數(shù)據(jù)AutoUpdateFrequency:1000, //數(shù)據(jù)更新頻率Column:[//{Type:DEAL_COLUMN_ID.STRING_TIME_ID }, //自定義時(shí)間格式{Type:DEAL_COLUMN_ID.TIME_ID },{Type:DEAL_COLUMN_ID.PRICE_ID },{Type:DEAL_COLUMN_ID.UPDOWN_ID },{Type:DEAL_COLUMN_ID.VOL_ID },{Type:DEAL_COLUMN_ID.BS_ID },],Border: //邊框{Left:1, //左邊間距Right:1, //右邊間距Bottom:1, //底部間距Top:1 //頂部間距} };

Type

圖形類型， 這里填"成交明細(xì)"

Symbol

顯示的股票代碼 股票代碼需要帶后綴. 上海.sh 深證.sz

IsAutoUpdate

是否自動(dòng)更新

AutoUpdateFrequency

定時(shí)更新頻率單位:ms

Column

成交明細(xì)表格列配置

Type

列屬性

var DEAL_COLUMN_ID= {TIME_ID:0, //時(shí)間PRICE_ID:1, //成交價(jià)格VOL_ID:2, //成交量DEAL_ID:3, //成交筆數(shù)BS_ID:4,UPDOWN_ID:5, //漲跌STRING_TIME_ID:6, //字符串時(shí)間INDEX_ID:7, //序號(hào) 從1開(kāi)始MULTI_BAR_ID:8, //多顏色柱子 CENTER_BAR_ID:9, //中心柱子,CUSTOM_TEXT_ID:10 //自定義文本 }

序號(hào)列

從1開(kāi)始的， 顯示序號(hào)

多柱子列

顯示多個(gè)列加柱子

{Type:DEAL_COLUMN_ID.MULTI_BAR_ID , Title:"柱子1", DataIndex:8 }//數(shù)據(jù)結(jié)構(gòu) { Value:[柱子1數(shù)據(jù)， 柱子2數(shù)據(jù) ......], Color:[柱子1顏色索引， 柱子2顏色索引 .....] } 注意柱子數(shù)值范圍(0-1) 柱子顏色池建全局配置

中心柱子

以單元格中間為中心，左右個(gè)繪制一個(gè)柱子

{Type:DEAL_COLUMN_ID.CENTER_BAR_ID , Title:"柱子1", DataIndex:8 }//數(shù)據(jù)結(jié)構(gòu) { Value:[左側(cè)柱子數(shù)據(jù)， 右側(cè)柱子數(shù)據(jù)], Color:[左側(cè)柱子顏色索引， 右側(cè)柱子顏色索引] } 注意柱子數(shù)值范圍(0-1) 柱子顏色池建全局配置

自定義字段

通過(guò)注冊(cè)事件JSCHART_EVENT_ID.ON_DRAW_DEAL_TEXT ， 每次繪圖觸發(fā)回調(diào)，獲取需要繪制的需要文字，顏色等等

{ //自定義內(nèi)容event:JSCHART_EVENT_ID.ON_DRAW_DEAL_TEXT, callback:(event, data, obj)=>{ this.GetCustomText(event, data, obj); } } .........this.GetCustomText=function(event, data, obj) {...... 填寫(xiě)data.Out 需要繪制的內(nèi)容data.Out.Text=out.Text;data.Out.TextColor=out.Color;data.Out.TextAlign='center'; }

Title

列名 （缺省使用內(nèi)置的列名）

TextAlign

對(duì)齊方式 （缺省使用內(nèi)置的對(duì)齊方式)
“center” | “right” | “l(fā)eft”

DataIndex

柱子數(shù)據(jù)對(duì)應(yīng)的索引號(hào)

Border

邊框四周的留白間距

IsSingleTable

是否是單表模式， 默認(rèn)是多個(gè)表模式
下圖為單表模式

IsShowHeader

是否顯示表頭

KeyDown

是否處理鍵盤消息 默認(rèn)true

Wheel

是否處理滾軸消息 默認(rèn)true

配色

/ // 全局配置顏色 // // function JSChartResource() {........//成交明細(xì)this.DealList={BorderColor:'rgb(192,192,192)', //邊框線Header:{Color:"RGB(60,60,60)", //列文字Mergin:{ Left:5, Right:5, Top:4, Bottom:2 }, //表頭四周間距Font:{ Size:12, Name:"微軟雅黑" } //表頭字體},Row:{Mergin:{ Top:2, Bottom:2 }, //行上下間距Font:{ Size:15, Name:"微軟雅黑"}, //單元格字體BarMergin:{ Top:2, Left:3, Right:3, Bottom:2 } //柱子四周間距},FieldColor:{Vol:"rgb(90,90,90)", //成交量Time:"rgb(60,60,60)", //時(shí)間Deal:"rgb(90,90,90)", //成交筆數(shù)Index:"rgb(60,60,60)", //序號(hào)BarTitle:'rgb(60,60,60)', //柱子文字Bar:["rgb(255,0,0)", "rgb(34,139,34)", "rgb(119,136,153)","rgb(75,0,130)","rgb(65,105,225)","rgb(255,215,0)", 'rgb(255,0,255)', "rgb(128,128,0)"] //柱子顏色池},UpTextColor:"rgb(238,21,21)", //上漲文字顏色DownTextColor:"rgb(25,158,0)", //下跌文字顏色UnchagneTextColor:"rgb(0,0,0)" //平盤文字顏色 }.......... }

數(shù)據(jù)篩選

數(shù)據(jù)篩選事件

成交明細(xì)支持?jǐn)?shù)據(jù)篩選，通過(guò)注冊(cè)數(shù)據(jù)篩選事件，把原始數(shù)據(jù)根據(jù)自己的規(guī)則，過(guò)濾以后返回篩選以后的數(shù)據(jù)，

//注冊(cè)事件{ //過(guò)濾數(shù)據(jù)event:JSCHART_EVENT_ID.ON_FILTER_DEAL_DATA, callback:(event, data, obj)=>{ this.OnFilterData(event, data, obj); } }.................this.OnFilterData=function(event, data, obj){// data.Data 原始數(shù)據(jù)// data.Result 篩選以后的數(shù)據(jù)var sourceData=data.Data; //原始數(shù)據(jù)for(var i=0;i<sourceData.length;++i){var item=sourceData[i];if (過(guò)濾條件) data.Result.push(item);}}

打開(kāi)|關(guān)閉數(shù)據(jù)篩選功能

EnableFilter(bEnable, option)

bEnable = 是否開(kāi)始篩選功能
option 可選項(xiàng) { Redraw:是否立即重繪表格， GotoLastPage:定位到最后一頁(yè)(默認(rèn)定位到第1頁(yè)） }

this.Chart.EnableFilter(true, { Redraw:true, GotoLastPage:true });

第3方數(shù)據(jù)對(duì)接教程

HQChart使用教程93-分筆明細(xì)表對(duì)接第3方數(shù)據(jù)1-全量分筆明細(xì)數(shù)據(jù)
HQChart使用教程93-分筆明細(xì)表對(duì)接第3方數(shù)據(jù)2-增量分筆明細(xì)數(shù)據(jù)

QQ群: 950092318

如果還有問(wèn)題可以加交流QQ群: 950092318

HQChart代碼地址

地址：github.com/jones2000/HQChart

總結(jié)

以上是生活随笔為你收集整理的HQChart使用教程92-如何创建分笔明细表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。