HQChart使用教程52- 自定义手机端K线图Tooltip
内置Tooltip类
hqchart 内置一个tooltip类KLineTooltipPaint, 如果不能满足你的输出格式要求,可以通过外部派生这个类,来改写
创建自定义tooltip类
function CustomTooltip()
{
this.newMethod = KLineTooltipPaint; //派生
this.newMethod();
delete this.newMethod;
this.Draw = function ()
{
}
}
挂接自定义类到hqchart
再setoption里面我可以配置一个外部tooltip创建方法,来替换内置的tooltip.
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
.......
ExtendChart: //扩展图形
[
{Name:'KLineTooltip',Create: function () { return new CustomTooltip(); } } //手机端tooltip
],
这样创建tooltip的时候,就会创建外部的CustomTooltip类了
简单的实现下CustomTooltip
KLineTooltipPaint 有几个成员变量再画图时会使用
this.Canvas; //画布 通过画布把数据显示上去
this.ChartBorder; //边框信息
this.Data; //K线数据
this.Width //宽度
this.Height //高度
this.LineHeight //行高
this.Font //字体 数组
this.HQChart; //hqchart实例
//自定义tooltip
function CustomTooltip()
{
this.newMethod = KLineTooltipPaint; //派生
this.newMethod();
delete this.newMethod;
this.Draw = function ()
{
// 判断当前是否显示tooltip
if (!this.IsEnableDraw()) return;
this.KLineTitlePaint=this.HQChart.TitlePaint[0];
var klineData=this.KLineTitlePaint.GetCurrentKLineData();
if (!klineData) return;
//设置tooltip高度, 宽度
var maxText=' 擎擎: 9999.99亿 '; //最长的输出
this.Width=this.Canvas.measureText(maxText).width;
this.Height=100;
this.DrawBG();
this.DrawItem(klineData);
this.DrawBorder();
}
//显示当前数据
this.DrawItem=function(item)
{
console.log('[CustomTooltip::Draw]', item);
var defaultfloatPrecision=2;//价格小数位数
var left=this.GetLeft()+2;
var top=this.GetTop()+3;
this.Canvas.textBaseline="top";
this.Canvas.textAlign="left";
this.Canvas.font=this.Font[0];
var labelWidth=this.Canvas.measureText('擎擎: ').width;
//日期
var text=item.Date.toString();
this.Canvas.fillStyle=this.TitleColor;
this.Canvas.fillText(text, left,top);
//收盘价
top+=this.LineHeight;
this.Canvas.fillStyle=this.TitleColor;
this.Canvas.fillText("开盘:", left,top);
text=item.Open.toFixed(defaultfloatPrecision);
this.Canvas.fillText(text,left+labelWidth,top);
//把需要的字段都输出就可以 这里就不写了
}
}
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址:https://github.com/jones2000/HQChart