HQChart使用教程92-如何創建分筆明細表

• 成交明細
• 初始化成交明細
• Option的配置項說明
• • Type
  • Symbol
  • IsAutoUpdate
  • AutoUpdateFrequency
  • Column
  • • Type
    • • 序號列
      • 多柱子列
      • 中心柱子
      • 自定義字段
    • Title
    • TextAlign
    • DataIndex
  • Border
  • IsSingleTable
  • IsShowHeader
  • KeyDown
  • Wheel
• 配色
• 數據篩選
• • 數據篩選事件
  • 打開|關閉數據篩選功能
• 第3方數據對接教程
• QQ群: 950092318
• HQChart代碼地址

成交明細

鍵盤支持
Up/Down 翻頁
滾軸上下 翻頁

注意 目前成交明細只支持PC頁面。

初始化成交明細

<div id="deal" style="width: 900px;height:400px;"></div> ............ var chart=JSDealChart.Init(document.getElementById('deal')); //把成交明細圖綁定到一個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的配置項說明

分筆明細表設置是通過Option來配置的。
下面是一個配置例子

this.Option= {Type:'成交明細', //創建圖形類型Symbol:'600000.sh',IsAutoUpdate:true, //是自動更新數據AutoUpdateFrequency:1000, //數據更新頻率Column:[//{Type:DEAL_COLUMN_ID.STRING_TIME_ID }, //自定義時間格式{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

圖形類型， 這里填"成交明細"

Symbol

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

IsAutoUpdate

是否自動更新

AutoUpdateFrequency

定時更新頻率單位:ms

Column

成交明細表格列配置

Type

列屬性

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

序號列

從1開始的， 顯示序號

多柱子列

顯示多個列加柱子

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

中心柱子

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

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

自定義字段

通過注冊事件JSCHART_EVENT_ID.ON_DRAW_DEAL_TEXT ， 每次繪圖觸發回調，獲取需要繪制的需要文字，顏色等等

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

Title

列名 （缺省使用內置的列名）

TextAlign

對齊方式 （缺省使用內置的對齊方式)
“center” | “right” | “left”

DataIndex

柱子數據對應的索引號

Border

邊框四周的留白間距

IsSingleTable

是否是單表模式， 默認是多個表模式
下圖為單表模式

IsShowHeader

是否顯示表頭

KeyDown

是否處理鍵盤消息 默認true

Wheel

是否處理滾軸消息 默認true

配色

/ // 全局配置顏色 // // function JSChartResource() {........//成交明細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)", //時間Deal:"rgb(90,90,90)", //成交筆數Index:"rgb(60,60,60)", //序號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)" //平盤文字顏色 }.......... }

數據篩選

數據篩選事件

成交明細支持數據篩選，通過注冊數據篩選事件，把原始數據根據自己的規則，過濾以后返回篩選以后的數據，

//注冊事件{ //過濾數據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 原始數據// data.Result 篩選以后的數據var sourceData=data.Data; //原始數據for(var i=0;i<sourceData.length;++i){var item=sourceData[i];if (過濾條件) data.Result.push(item);}}

打開|關閉數據篩選功能

EnableFilter(bEnable, option)

bEnable = 是否開始篩選功能
option 可選項 { Redraw:是否立即重繪表格， GotoLastPage:定位到最后一頁(默認定位到第1頁） }

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

第3方數據對接教程

HQChart使用教程93-分筆明細表對接第3方數據1-全量分筆明細數據
HQChart使用教程93-分筆明細表對接第3方數據2-增量分筆明細數據

QQ群: 950092318

如果還有問題可以加交流QQ群: 950092318

HQChart代碼地址

地址：github.com/jones2000/HQChart

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。