HQChart使用教程92-如何创建分笔明细表
- Type
成交明细
键盘支持
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
