HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据

已于 2023-10-15 01:05:24 修改
阅读量6k 收藏 3
点赞数 2
分类专栏： JavaScript HQChart 文章标签： kline 走势图 canvas
于 2019-08-30 03:24:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/100149703
版权
HQChart 同时被 2 个专栏收录
164 篇文章 98 订阅
订阅专栏
JavaScript
151 篇文章 33 订阅
订阅专栏

走势图如何对接第3方数据2-最新分时数据

协议名称-最新分时数据

对应代码的类名和函数名： MinuteChartContainer::RequestMinuteData

Request 字段说明

field 需要请求的数据字段

field 是一个数组，包含了需要请求的这个股票的数据字段，你可以根据这些字段对应到第3方接口字段上。
“name” ：股票名称
“symbol”：股票代码
“yclose”：前收盘
“open”： 开盘价
“price”： 最新价
“high”：最高价
“low”：最低价
“vol”：成交量
“amount”：成交金额
“date”：交易日期
“time”：交易时间
“minute” 分钟数据
“minutecount” 分钟数据个数
“before”：盘前集合竞价 (开启集合竞价才会请求这个字段）

symbol 请求的股票代码

返回json数据结构

股票json格式

{
  "stock": [
    {
      "time": 150003,
      "date": 20190829,
      "price": 14.13,
      "open": 14.22,
      "yclose": 14.27,
      "high": 14.24,
      "low": 14.08,
      "vol": 60903434,
      "amount": 861177482,
      "symbol": "000001.sz",
      "name": "平安银行"
      "minute": [
        {
          "price": 14.22,
          "open": 14.22,
          "high": 14.22,
          "low": 14.22,
          "vol": 408900,
          "amount": 5814558,
          "time": 925,
          "avprice": 14.22,
          "increase": -0.350385423966363,
          "risefall": -0.05
        },
        {
          "price": 14.22,
          "open": 14.23,
          "high": 14.24,
          "low": 14.2,
          "vol": 800100,
          "amount": 11378325,
          "time": 930,
          "avprice": 14.22,
          "increase": -0.350385423966363,
          "risefall": -0.05
        },
       ..........
      ] ,
"before": [
        [
          915,
          0.0,
          0,
          0,
          0.0,
          0.0
        ],
        [
          916,
          14.27,
          0,
          0,
          0.0,
          0.0
        ],
        [
          917,
          14.27,
          0,
          0,
          0.0,
          0.0
        ],
        [
          918,
          14.27,
          0,
          0,
          0.0,
          0.0
        ],
        [
          919,
          14.27,
          0,
          0,
          0.0,
          0.0
        ],
        [
          920,
          14.25,
          0,
          0,
          0.0,
          0.0
        ],
        [
          921,
          14.25,
          0,
          0,
          0.0,
          0.0
        ],
        [
          922,
          14.21,
          0,
          0,
          0.0,
          0.0
        ],
        [
          923,
          14.24,
          0,
          0,
          0.0,
          0.0
        ],
        [
          924,
          14.21,
          408900,
          5814558,
          0.0,
          0.0
        ],
        //1分钟1条数据，
        ..........
   ]
  }]

指数json格式 比股票多一个领先指标字段(lead)

{
  "stock": [
    {
      "time": 150016,
      "date": 20190829,
      "price": 2890.919,
      "open": 2895.999,
      "yclose": 2893.756,
      "high": 2898.605,
      "low": 2878.588,
      "vol": 178613082,
      "amount": 196332770521,
      "symbol": "000001.sh",
      "name": "上证指数"
      "minute": [
        {
          "price": 2895.999,
          "open": 2893.756,
          "high": 2895.999,
          "low": 2893.756,
          "vol": 2135441,
          "amount": 1712812162,
          "time": 925,
          "avprice": 2896.414,
          "increase": 0.07751171833423412,
          "risefall": 2.243,
          "lead": 0
        },
        {
          "price": 2896.685,
          "open": 2896.976,
          "high": 2898.605,
          "low": 2896.629,
          "vol": 4029858,
          "amount": 3522079095,
          "time": 930,
          "avprice": 2894.957,
          "increase": 0.1012179326798804,
          "risefall": 2.929,
          "lead": -22
        },
        //1分钟1条数据， 
        ......................
        ]
 }]

name 股票名称

symbol 股票代码

yclose 昨收

open 当日开盘价

high 当日最高价

low 当日最低价

vol 当日成交量

amount 当日成交金额

price 最新价/收盘价

yclearing 期货结算价

如果是期货后缀,并且有结算价, 走势图Y中轴使用结算价

date 交易日期

这条记录最后入库的日期 格式yyyymmdd 如 20190829 => 2019-08-29

time 最新的交易时间

这条记录最后入库的时间 格式 hhmmss, 如 150016 => 15:00:16

minute 分钟数据

分钟数据数组 1分钟一条数据，
price 价格， open 这1分钟的开盘价， high 最高 , low 最低 , vol 成交量 , amount 成交金额
time 交易时间 格式：hhmm 如930 就是9：30，
date 交易日期 格式：yyyymmdd 如20191011=>2019-10-11
avprice 均价， increase 涨幅， risefall 涨跌
lead 领先指标（指数才有), position 持仓量（期货才有）yclearing 昨结算价(期货才有)
注意都是数值型，不是字符串!!! !!! !!!
ExtendData 扩展数据

before 集合竞价数据

集合竞价只有在当日分时图才显示

1.0格式

东方财富集合竞价格式,只有股票才有， 指数没有 ，1分钟1条数据， 每条记录内部有6条数据目前只用到了前面4个数据分别是:

//盘前
before:
[
    [交易时间, 价格，成交量， 成交金额, 日期（可选，YYYYMMDD)],
    .....
]

beforeinfo:
{
	totalcount:一共的数据个数
	ver:1.0
}

//盘后
after:
[
    [交易时间, 价格，成交量， 成交金额, 日期（可选，YYYYMMDD)],
    .....
]

afterinfo
{
	totalcount:一共的数据个数
	ver:1.0
}

在这里插入图片描述

2.0格式

通达信集合竞价数据格式只有股票才有， 指数没有.

盘前
before:
[
    //!!!!!!! 数据都是数值型
    [交易时间（格式MMHHSS), 价格，匹配量, 未匹配量, 量柱子颜色ID，总的量（用来计算Y轴的最大值）, 日期（可选)], 
    .....
],
beforeinfo:
{
	totalcount:一共的集合竞价个数 （如1s一个数据， 这样9：15-：9：30 一共就 =60*15);
	ver:2.0
}
盘后
after:
[
    //!!!!!!! 数据都是数值型
    [交易时间（格式MMHHSS), 价格，匹配量, 未匹配量, 量柱子颜色ID，总的量（用来计算Y轴的最大值）], 
    .....
],
afterinfo:
{
	totalcount:一共的集合竞价个数 （如1s一个数据， 这样9：15-：9：30 一共就 =60*15);
	ver:2.0
}

在这里插入图片描述

3.0格式

指数模式

before:
[
    //!!!!!!! 数据都是数值型
    [交易时间（格式MMHHSS), 价格，均价, 匹配量, 量柱子颜色ID（可以用3自定义颜色），总的量（用来计算Y轴的最大值）], 
    .....
],
beforeinfo:
{
	totalcount:一共的集合竞价个数 （如1s一个数据， 这样9：15-：9：30 一共就 =60*15);
	ver:3.0
}

在这里插入图片描述

linecolor 自定义分段颜色

data

数组，1段颜色1组
type=0 ， 目前只支持0， 连续交易时间
date=交易日期，
[start,end]线段的起始结束时间，
color=线段颜色
linewidth=线段宽度

data:
[
  {type:0, date:item.date, start:935, end:955 , color:'rgb(220,20,60)', linewidth:4 }, //0=连续交易
  {type:0, date:item.date, start:1015, end:1025 , color:'rgb(50,50,150)', linewidth:2},
  {type:0, date:item.date, start:1026, end:1035 , color:'rgb(127,255,0)', linewidth:2},
],

ver

固定值 1.0

增量更新数据格式

当日分时图有1种格式， 1种是当日全量数据 1种是当前增量数据
数据格式如下

{
    "dataType": 1,	//增量数据标识
    "stock": [
        {
            "date": 20230707,
            "yclose": 7.21,
            "symbol": "600000.sh",
            "name": "600000.sh",
            
            //单条分钟数据格式 0=日期 1=时间 2=开 3=高 4=低 5=收 6=均价 7=量 8=金额 9=涨幅 10=涨跌 11=领先指标
            "minute": [
                [	
                    20230707,
                    939,
                    7.2,
                    7.22,
                    7.21,
                    7.2,
                    7.211,
                    38500,
                    277594
                ],
                [
                    20230707,
                    940,
                    7.22,
                    7.22,
                    7.21,
                    7.21,
                    7.211,
                    17400,
                    125526
                ]
            ]
        }
    ]
}

样本数据

https://github.com/jones2000/HQChart/blob/master/教程/数据样例/当日分时图.json

付费源码

HQChart分时图对接源码(Vue) 使用东方财富网页数据

HQChart代码地址

地址：github.com/jones2000/HQChart

HQChart
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
CIFAR-10数据集（好用的子集，方便个人学习使用，附教程）
07-16
cifar-10-matlab.tar.gz为官网下载的cifar-10数据集，共十个...2 cifar10sub文件夹是cifar-10数据集的一个子集，共十个分类，7000个图像，数据量相对较小，方便学习使用； 3 下载、解压、读取，另存等方法，看视频66.36
XPS-数据处理和分峰.ppt
12-01
3. 峰形拟合：使用峰形函数对数据进行拟合，以确定峰形的位置、宽度和高度。 4. 元素鉴别：根据峰形的位置和形状确定元素的种类和含量。 XPS 数据处理的目的是为了获得高质量的数据，确保数据的可靠性和准确性。...
HQChart使用教程49-指标配置项说明
小银
11-06 5303
HQChart使用教程49-指标配置项说明指标配置项1. 标题高度2. 标题输出格式3. 标题输出小数位数4. 空指标5 动态执行指标脚本6 系统指标带参数7 API 远程指标计算 简单的指标配置项请参看 HQChart使用教程1- 如何快速创建一个K线图页面 指标配置项 1. 标题高度 TitleHeight 当标题高度<5 就不会显示指标的标题 2. 标题输出格式 StringForm...
hqchart使用总结及方法--react+hqchart
Uxiao7的博客
10-26 1030
1.根据不同的 Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线去使用NetworkFilter里的data会返回Name。//hqchart图形适配 把chart 放在最外面就可以控制。//引用HQChart ,要使用状态栏的小图标必须引用css。1.在react项目中下载hqchart。1.创建一个hqchart图形。//动态请求网络数据接口。//需要的Option。
HQChart5日分时图(Vue)
09-14
股票实时5日分时图对接样例, VUE2版本 npm run dev 启动
HQChart实战教程6-自定义分时图
小银
02-04 3496
HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段）步骤3(定义X轴分割线)步骤4 （替换自定义品种接口函数）步骤5 （接口数据）完整代码 分时图 hqchart分时图是根据不品种，内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示 要求 假设 XXYY品种交易时间段如下 8:00 -10:00 ,...
HQChart实战教程1-外汇分时图
小银
11-26 2760
HQChart实战教程1-外汇分时图需求HQChart需要的数据品种代码网络协议名字网络协议回调分时数据下载当天全量数据下载全量数据转hqchart格式增量数据更新下载增量数据更新到hqchart自动更新频率控制 需求 对接第3方外汇数据， 显示外汇分时图, 注意这种分时图是固定时间段的， 是不能左右拖动的。如果要左右拖动的使用K线面积图来做。 第3方数据，接触下来， 一般好像没有当日分时的API...
HQChart使用教程5- K线图控件操作函数说明
小银
05-17 8320
HQChart图形操作接口API说明
HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据
小银
10-12 3510
HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据协议名称-当天1分钟K线数据协议日志截图Request 字段说明symbolfield返回json数据结构数据截图stockminute 协议名称-当天1分钟K线数据 KLineChartContainer::RequestMinuteRealtimeData 协议日志截图 Request 字段说明 symbol......
HQChart分时图(Vue)
09-13
【HQChart分时图(Vue)】是一款基于Vue2框架的股票实时分时图表组件，专为数据可视化设计。此项目旨在提供一个示例，展示如何将HQChart库与Vue2相结合，实现实时更新的股票分时走势展示。通过运行`npm run dev`命令，...
微信小程序 沪深/港股 K线图，走势图，通达信语法，股票HQChart-master.zip
09-25
微信小程序 沪深/港股 K线图，走势图，通达信语法，股票HQChart-master.zip
HQChart分钟K线图(Vue)
10-03
股票K线图对接第3放数据样例, VUE2版本，使用东方财富网页数据 npm run dev 启动
K线图，走势图，支持通达信语法
11-30
开源地址：https://github.com/jones2000/HQChart 目录结构 webhqchart.demo 页面行情测试用例 |--jscommon 行情前端js代码 是webhqchart的一个拷贝 |--demo 测试用 *注意！ 目前代码使用了ES6的特性， 所有会导致有些老的浏览器无法显示， 需要使用Babel转成es5 功能： 1. K线图 支持前复权,后复权 支持日线,月线,周线,年线. 主图支持股票叠加 支持常用指标指标(目前以录入系统指标85个) 均线，BOLL，MACD，KDJ，VOL，RSI，BRAR，WR，BIAS，OBV，DMI，CR，PSY，CCI， DMA，TRIX，VR，EMV，ROC，MIM，FSL，CYR，MASS，WAD，CHO ..... 支持画图工具(小程序不支持) 线段，射线，矩形，圆弧线 支持区间统计， 区间形态匹配 (微信小程序版本不支持) 数据鼠标左右拖拽移动, 键盘移动十字光标移动，键盘缩放 支持通达信语法指标 2. 走势图 支持指标 支持沪深和港股 分钟数据显示 支持多日分钟数据显示
swift-SciChart.iOS高性能图表库的展示教程和示例
08-15
SciChart.iOS高性能图表库的展示，教程和示例
垃圾分类数据集和tf代码-8w张图片245个类.zip
06-18
包含垃圾分类数据集和tf代码-8w张图片245个类，提供2组训练好的模型在models目录下，详情请看https://blog.csdn.net/ECHOSON/article/details/118025415
HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标
小银
09-30 2513
HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标效果图步骤1.创建iconfont文件2. 配置一个第3方指标3. 网络协议回调计算指标自定义图标json格式nametypeDrawDraw.DrawTypeDraw.DrawDataDraw.DrawData.FamilyDraw.DrawData.Icon 使用自定义svg图标显示再指标上，这里我们只支持svg图...
后台指标计算返回数据格式说明6 - DRAWNUMBER格式
小银
11-18 1874
后台指标计算返回数据格式说明6 - DRAWNUMBER格式DRAWNUMBER返回格式说明DrawTypeTypeDrawNumberPrice示例QQ群: 950092318HQChart代码地址 DRAWNUMBER 画出数字. 用法: DRAWNUMBER(COND,PRICE,NUMBER),当COND条件满足时,在PRICE位置书写数字NUMBER. 例如: DRAWNUMBER(CLOSE/OPEN>1.08,LOW,C)表示当日实体阳线大于8%时在最低价位置显示收盘价. 返回格式说明
HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子
小银
02-20 1630
HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子数据格式nametypeDrawDraw.DrawTypeDraw.DrawData完整实例 使用自定义柱子数据结构可以快速绘制出柱子 效果图 前面的步骤和第3方指标替换一样， 通过网络协议回调，知道需要执行的指标， 替换自己的数据。这里就不说了， 不知道的看以下2个教程 HQChart使用教程30-K线图如何对接第3方...
HQChart使用教程30-K线图如何对接第3方数据19-如何绘制彩色K线柱
小银
03-14 1229
HQChart使用教程30-K线图如何对接第3方数据19-如何绘制彩色K线柱需求步骤1. 配置一个第3方指标2. 配置NetworkFilter3. 对接自己的指标数据彩色K线数据格式name:Color:DrawDataKLine完成实例代码如果还有问题可以加交流QQ群: 950092318HQChart代码地址 需求 我们需要在某几天的K线使用不同颜色来显示，已达到醒目的效果 效果图如下 步...
uniapp hqchart 对接第三方数据
最新发布
10-06
uniapp是一款跨平台的开发框架，可以用于快速开发基于Vue.js的移动应用程序。HQChart是一个强大的HTML5图表库，可以用于绘制各种交互式图表。在uniapp中，我们可以通过对接第三方数据来使用HQChart。 首先，我们需要获取第三方数据。可以通过调用接口、从数据库中读取数据或者使用网络爬虫等方式获取数据。将获取到的数据进行处理，转换成HQChart所需要的格式。 接下来，我们可以使用uniapp提供的组件来展示HQChart图表。在uniapp中，可以使用动态组件的方式将HQChart图表组件动态添加到页面中。将获取到的第三方数据传递给HQChart组件，通过配置参数来控制图表的展示。 同时，我们还需要在uniapp的页面中引入HQChart的代码库。可以通过npm安装或者引入外部的JavaScript文件来实现。这样，我们就可以使用HQChart提供的方法和API来操作图表，比如设置图表的样式、添加交互、添加指标等。 最后，可以根据需要对HQChart图表进行二次开发和定制。通过修改HQChart的配置参数和样式，可以实现更加个性化和定制化的图表展示效果。 综上所述，通过uniapp的跨平台特性和HQChart强大的图表功能，我们可以很方便地对接第三方数据，实现在uniapp应用中展示各种交互式图表的需求。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HQChart

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值