HQChart使用教程12-如何在K线图上添加弹幕

最新推荐文章于 2024-06-06 14:18:43 发布

HQChart

最新推荐文章于 2024-06-06 14:18:43 发布

阅读量1.4k

点赞数

分类专栏： JavaScript HQChart 文章标签：弹幕 K线 KLine H5 js

本文链接：https://blog.csdn.net/jones2000/article/details/91125408

版权

HQChart 同时被 2 个专栏收录

164 篇文章 98 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChart使用教程12-如何在K线图上添加弹幕

启动弹幕函数
关闭弹幕函数
弹幕控制类 BarrageList
单条弹幕播放完毕监听事件
demo页面代码
HQChart代码地址

效果图

启动弹幕函数

chart.StartAnimation()
启动弹幕并且返回弹幕控制类实例 BarrageList;

关闭弹幕函数

chart.StopAnimation()

弹幕控制类 BarrageList

添加弹幕 BarrageList.AddBarrage(data)
data:添加弹幕数据，是一个数组
单条弹幕数据格式:
{ Text:弹幕文字, Color:弹幕字体颜色 , Font:{ Name:弹幕字体, Hight: 字体高度 }(字体信息为空使用默认字体信息), Info: {弹幕额外信息,数据接口可以根据自己需要写}},
未播放弹幕队列数据 Cache
存放需要播放的弹幕数据

单条弹幕播放完毕监听事件

如果要对个别弹幕做循环播放，可以使用单条弹幕播放完毕事件，根据弹幕Info数据判断是否是需要循环播放的弹幕，添加到播放队列里面去

Chart.AddEventCallback(obj)

obj { event:事件ID, callback:回调函数 }
目前支持一下事件监听

var JSCHART_EVENT_ID=
{
  RECV_KLINE_MATCH:1, //接收到形态匹配
  RECV_INDEX_DATA:2,  //接收指标数据
  RECV_HISTROY_DATA:3,//接收到历史数据
  RECV_TRAIN_MOVE_STEP:4, //接收K线训练,移动一次K线
  CHART_STATUS:5,          //每次Draw() 以后会调用
  BARRAGE_PLAY_END:6,      //单条弹幕播放完成
}

这里我们使用 BARRAGE_PLAY_END 这个监听事件，并绑定一个回调函数
回调函数参数 function(event,data.barragelist)
*event 注册的监听事件信息
data 播放完毕的弹幕数据
barragelist 弹幕控制类

demo页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>页面行情(K线图)</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>

    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/webfont.js"></script>
    <script src="../jscommon/umychart.network.js"></script>     <!-- 网络接口 -->
    <script src="../jscommon/umychart.js"></script>             <!-- K线图形 -->
    <script src="../jscommon/umychart.complier.js"></script>    <!-- 麦语言解析执行器 -->
    <script src="../jscommon/umychart.index.data.js"></script>  <!-- 基础指标库 -->
    <script src="../jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 -->
    
    <script>

        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上
            this.Barrage;                    //弹幕输出控制器

            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                
                Windows: //窗口指标
                [
                    {Index:"MA", Modify:false,Change:false},
                    {Index:"VOL", Modify:false,Change:false},
                    {Index:"RSI", Modify:false,Change:false}, 
                ], 
                
                Symbol:'600000.sh',
                IsAutoUpdate:true,       //是自动更新数据
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
    
                IsShowRightMenu:true,          //右键菜单
                IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息
                CorssCursorTouchEnd:true,
    
                KLine:  //K线设置
                {
                    DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                    Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                    Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                    MaxReqeustDataCount:1000,   //数据个数
                    MaxRequestMinuteDayCount:10, //分钟数据取5天
                    PageSize:50,               //一屏显示多少数据
                    //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                    IsShowTooltip:true,                 //是否显示K线提示信息
                },
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:1,         //左边间距
                    Right:50,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ],

                ExtendChart:    //扩展图形
                [
                    {Name:'KLineTooltip' }  //手机端tooltip
                ],
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件

                //var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
                //JSChart.SetStyle(blackStyle);
                //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景

                this.OnSize();  //让K线全屏
                this.Chart.SetOption(this.Option);  //设置K线配置
                this.Barrage=this.Chart.StartAnimation();

                this.OnRecvBarrageData();
            }

            var BARRAGE_ID=1;
            this.OnRecvBarrageData=function(data)   //模拟弹幕数据到达
            {
                var testData = [
                    { Text:`[${++BARRAGE_ID}]?测试弹幕 (25px 宋体) RGB(0,0,205)`, Color:'RGBA(0,0,205,0.6)' , Font:{ Name:25*GetDevicePixelRatio()+'px 宋体', Hight: 25 }, Info: {ID:BARRAGE_ID}},
                    { Text:`[${++BARRAGE_ID}]✔测试弹幕 (22px 微软雅黑) RGB(33,0,205)`, Color:'RGBA(33,0,205,0.7)' , Font:{ Name:22*GetDevicePixelRatio()+'px 微软雅黑', Hight: 25 },Info: {ID:BARRAGE_ID}},
                    { Text:`[${++BARRAGE_ID}]?测试弹幕 RGB(20,240,20)`, Color:'RGBA(20,240,20)',Info: {ID:BARRAGE_ID}},
                    { Text:`[${++BARRAGE_ID}]?测试弹幕 (20px fangsong) RGB(100,0,205)`, Color:'RGBA(100,0,205,0.5)' , Font:{ Name:20*GetDevicePixelRatio()+'px fangsong', Hight: 25 },Info: {ID:BARRAGE_ID}},
                    { Text:`[${++BARRAGE_ID}]?测试弹幕 (16px 微软雅黑) RGB(255,30,20)`, Color:'RGB(255,30,20)' , Font:{ Name:16*GetDevicePixelRatio()+'px 微软雅黑', Hight: 16 }},
                    { Text:`[${++BARRAGE_ID}]?‍♂️测试弹幕 (14px 微软雅黑) RGB(100,0,205)`, Color:'RGBA(100,0,205,0.55)' , Font:{ Name:14*GetDevicePixelRatio()+'px 微软雅黑', Hight: 25 },Info: {ID:BARRAGE_ID}},
                    { Text:`[${++BARRAGE_ID}]?‍♂️测试弹幕 (24px 微软雅黑) RGB(100,0,205)`, Color:'RGB(100,0,205)' , Font:{ Name:14*GetDevicePixelRatio()+'px 微软雅黑', Hight: 25 },Info: {ID:BARRAGE_ID}}
                ];

                this.Barrage.AddBarrage(testData);

                var self=this;
                setTimeout(() => { self.OnRecvBarrageData() }, 3000);
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height();
                var width = $(window).width();
                this.DivKLine.style.top='px';
                this.DivKLine.style.left='px';
                this.DivKLine.style.width=width+'px';
                this.DivKLine.style.height=height+'px';
                this.Chart.OnSize();
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源
            var klineControl=new KLineChart(document.getElementById('kline'));
            klineControl.Create();
        })

    </script>  
</body>  
</html>

这样一个简单的K线弹幕就完成，目前实现的功能比较简单。
如果还又问题可以加交流QQ群: 950092318

HQChart代码地址

地址：https://github.com/jones2000/HQChart

HQChart

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HQChart使用教程12-如何在K线图上添加弹幕

HQChart使用教程12-如何在K线图上添加弹幕启动弹幕函数关闭弹幕函数弹幕控制类 BarrageList单条弹幕播放完毕监听事件demo页面代码HQChart代码地址效果图启动弹幕函数chart.StartAnimation()启动弹幕并且返回弹幕控制类实例 BarrageList;关闭弹幕函数chart.StopAnimation()弹幕控制类 BarrageList添加弹...
复制链接

扫一扫