A股分时图交易时间段

hqchart内置的A股分时图交易时间段为：
9：25， 9：30 - 11：30 ， 13：00 - 15：00
如果你的数据不是这个时间段就需要在外部自己定义好你的交易时间段

步骤

1. 替换hqchart内置A股交易时间段

var minuteStringData=JSChart.GetMinuteTimeStringData();	//获取hqchart内置所有品种的交易时间段
minuteStringData.CreateSHSZData=()=>{ return this.CreateSHSZData(); }   //替换交易时间段

配置你自己的交易时间段
这边配置为 9:30 - 11:30 13:00- 15:00

this.CreateSHSZData=function()
{
     const TIME_SPLIT =
     [
         { Start: 930, End: 1130 },
         { Start: 1300, End: 1500 }
     ];

     var minuteStringData=JSChart.GetMinuteTimeStringData();
     return minuteStringData.CreateTimeData(TIME_SPLIT);
 }

2. 替换hqchart内置的A股X轴显示信息

var minuteCoordinateData=JSChart.GetMinuteCoordinateData();	//获取hqchart内置分时图X轴信息
minuteCoordinateData.GetSHSZData=(upperSymbol,width)=> { return this.GetSHSZData(upperSymbol,width); }    //替换X轴刻度信息

配置自己的X轴信息
注意：
Count 是交易时间段中一共的数据个数，不要填多或少了否则X轴个数就不多了
Full， Simple， Min 是3种显示模式，通过GetData(width) 来控制的，不同的宽度显示不同的X轴刻度个数

this.GetSHSZData=function(upperSymbol,width)
{
    const SHZE_MINUTE_X_COORDINATE =
    {
        Full:   //完整模式
        [
            [0, 0, "rgb(200,200,200)", "09:30"],
            [31, 0, "RGB(200,200,200)", "10:00"],
            [61, 0, "RGB(200,200,200)", "10:30"],
            [91, 0, "RGB(200,200,200)", "11:00"],
            [122, 1, "RGB(200,200,200)", "13:00"],
            [152, 0, "RGB(200,200,200)", "13:30"],
            [182, 0, "RGB(200,200,200)", "14:00"],
            [212, 0, "RGB(200,200,200)", "14:30"],
            [241, 1, "RGB(200,200,200)", "15:00"], // 15:00
        ],
        Simple: //简洁模式
        [
            [0, 0, "rgb(200,200,200)", "09:30"],
            [61, 0, "RGB(200,200,200)", "10:30"],
            [122, 1, "RGB(200,200,200)", "13:00"],
            [182, 0, "RGB(200,200,200)", "14:00"],
            [242, 1, "RGB(200,200,200)", "15:00"]
        ],
        Min:   //最小模式     
        [
            [0, 0, "rgb(200,200,200)", "09:30"],
            [122, 1, "RGB(200,200,200)", "13:00"],
            [242, 1, "RGB(200,200,200)", "15:00"]
        ],

        Count: 242, //!! 一共的分钟数据个数，不要填错了
        MiddleCount: 121,   // Count/2 就可以。

        GetData: function (width) 
        {
            if (width < 200) return this.Min;
            else if (width < 400) return this.Simple;

            return this.Full;
        }
    };

    return SHZE_MINUTE_X_COORDINATE;
}

3. 注意

上面2个步骤必须放在setoption前面才可以。

如果是通过 npm install hqchart ，需要前面加上命名空间

import HQChart from 'hqchart'
.....
HQChart.Chart.JSChart.GetMinuteCoordinateData();
.....
HQChart.Chart.JSChart.GetMinuteTimeStringData();

小程序或uniapp是直接导出全局变量的。

import { JSCommonCoordinateData } from './umychart.coordinatedata.wechat.js';

.......
JSCommonCoordinateData.MinuteCoordinateData;
JSCommonCoordinateData.MinuteTimeStringData;

完整例子代码

<!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>页面行情(分时图)</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>
    <div id="divminute" 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 src="./localdata/000001.sz.minute2.js"></script>       <!-- 测试数据-->
    
    <script>

        //简单的把分时控件封装下
        function MinuteChart(divMinute)
        {
            this.DivMinute=divMinute;
            this.Chart=JSChart.Init(divMinute);   //把分时图绑定到一个Div上

            //分时图配置信息
            this.Option= {
                Type:'分钟走势图',   //创建图形类型

                Windows: //窗口指标
                [
                    //{Index:"MACD", Modify:false,Change:false},
                ], 
                
                Symbol:'000001.sz', 
                IsAutoUpdate:true,              //是自动更新数据
                DayCount:1,                     //1 最新交易日数据 >1 多日走势图
                IsShowRightMenu:true,          //是否显示右键菜单
    
                MinuteLine:
                {
                    IsDrawAreaPrice:false,      //是否画价格面积图
                    IsShowAveragePrice:false,   //不显示均线
                },
    
                Border: //边框
                {
                    Left:50,    //左边间距
                    Right:50,     //右边间距
                    Top:30,
                    Bottom:50
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:5,Height:30},
                    {SplitCount:4,Height:10},
                ],

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

                var minuteCoordinateData=JSChart.GetMinuteCoordinateData();
                var minuteStringData=JSChart.GetMinuteTimeStringData();

                minuteStringData.CreateSHSZData=()=>{ return this.CreateSHSZData(); }   //替换交易时间段
                minuteCoordinateData.GetSHSZData=(upperSymbol,width)=> { return this.GetSHSZData(upperSymbol,width); }    //替换X轴刻度信息

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

                this.OnSize();  //让分时图全屏
                this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
                this.Chart.SetOption(this.Option);  //设置K线配置
            }

            this.ChangeSymbol=function(symbol)  //切换股票
            {
                this.Chart.ChangeSymbol(symbol);
            }

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

            this.CreateSHSZData=function()
            {
                const TIME_SPLIT =
                [
                    { Start: 930, End: 1130 },
                    { Start: 1300, End: 1500 }
                ];

                var minuteStringData=JSChart.GetMinuteTimeStringData();
                return minuteStringData.CreateTimeData(TIME_SPLIT);
            }

            this.GetSHSZData=function(upperSymbol,width)
            {
                const SHZE_MINUTE_X_COORDINATE =
                {
                    Full:   //完整模式
                    [
                        [0, 0, "rgb(200,200,200)", "09:30"],
                        [31, 0, "RGB(200,200,200)", "10:00"],
                        [61, 0, "RGB(200,200,200)", "10:30"],
                        [91, 0, "RGB(200,200,200)", "11:00"],
                        [122, 1, "RGB(200,200,200)", "13:00"],
                        [152, 0, "RGB(200,200,200)", "13:30"],
                        [182, 0, "RGB(200,200,200)", "14:00"],
                        [212, 0, "RGB(200,200,200)", "14:30"],
                        [241, 1, "RGB(200,200,200)", "15:00"], // 15:00
                    ],
                    Simple: //简洁模式
                    [
                        [0, 0, "rgb(200,200,200)", "09:30"],
                        [61, 0, "RGB(200,200,200)", "10:30"],
                        [122, 1, "RGB(200,200,200)", "13:00"],
                        [182, 0, "RGB(200,200,200)", "14:00"],
                        [242, 1, "RGB(200,200,200)", "15:00"]
                    ],
                    Min:   //最小模式     
                    [
                        [0, 0, "rgb(200,200,200)", "09:30"],
                        [122, 1, "RGB(200,200,200)", "13:00"],
                        [242, 1, "RGB(200,200,200)", "15:00"]
                    ],

                    Count: 242, //!! 一共的分钟数据个数，不要填错了
                    MiddleCount: 121,   // Count/2 就可以。

                    GetData: function (width) 
                    {
                        if (width < 200) return this.Min;
                        else if (width < 400) return this.Simple;

                        return this.Full;
                    }
                };

                return SHZE_MINUTE_X_COORDINATE;
            }

            this.NetworkFilter=function(data, callback)
            {
                console.log('[MinuteChart::NetworkFilter] data', data);
                switch(data.Name)
                {
                    case 'MinuteChartContainer::RequestMinuteData':     //当天数据下载
                        this.RequestMinuteData(data, callback);
                        break;
                }
            }

            this.RequestMinuteData=function(data, callback)   //请求分钟数据
            {
                data.PreventDefault=true;   //禁止使用HQChart内部请求

                var hqChartData=SZ_000001_MINUTE_DATA;

                callback(hqChartData);
            }

        }

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

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

如果还有问题可以加交流QQ群: 950092318

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

HQChart实战教程9-自定义A股分时图