HQChart使用教程92-如何创建分笔明细表

成交明细

键盘支持
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

ShowOrder

显示顺序 0=顺序显示 1=倒序显示 （默认0）

配色

/
//   全局配置颜色
//
//
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-增量分笔明细数据

示例地址

• 分笔列表
• 分笔列表-小窗口模式

HQChart代码地址

地址：github.com/jones2000/HQChart