HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子

2024-03-24 00:30
文章标签 数据 使用 自定义 教程 对接 绘制 18 30 线图 柱子 hqchart

本文主要是介绍HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子

  • 数据格式
    • name
    • type
    • Draw
      • Draw.DrawType
      • Draw.DrawData
  • 完整实例

使用自定义柱子数据结构可以快速绘制出柱子
效果图
在这里插入图片描述

前面的步骤和第3方指标替换一样， 通过网络协议回调，知道需要执行的指标， 替换自己的数据。这里就不说了， 不知道的看以下2个教程
HQChart使用教程30-K线图如何对接第3方数据1
HQChart使用教程30-K线图如何对接第3方数据5-指标数据

自定义柱子集合是做为一组输出变量， 填入到输出变量数组(outvar)中

数据格式

在这里插入图片描述

name

填’MULTI_BAR’ 固定

type

填 1 固定

Draw

柱子绘制数据

Draw.DrawType

固定 ‘MULTI_BAR’

Draw.DrawData

绘制的自定义柱子集合， 支持多组柱子集合
格式
{
Color：柱子颜色，
Width: 柱子宽度 ， 缺省使用K线柱子宽度
Type: 0 实心 1空心 缺省使用实心
Point：[绘制柱子的点数组] }
单个Point数据结构:
{ Date:日期, Time: 时间（分时用,日线不需要), Value:Y轴值（柱子顶部/底部）， Value2: Y轴值2（柱子底部/顶部） }
下面是绘制一组柱子实例

var point=
{ Color:'rgb(244,55,50)', //柱子颜色//Type:1,Point:[{Date:20190916, Value:15.5, Value2:0 },   //在20190916上画一个底部是0 顶部是15.5的柱子{Date:20190917, Value:15.5, Value2:20 },  //在20190917上画一个底部是15.5 顶部是20的柱子{Date:20190902, Value:10.5,Value2:0}, ] 
};

完整实例

<!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线图-第3方数据-多柱子指标</title>  <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" /><link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" /><!-- 使用阿里云图片 --><!--<link rel="stylesheet" href="https://at.alicdn.com/t/font_1040563_1d1tgaoqofpi.css" />--><!--<link rel="stylesheet" href="https://at.alicdn.com/t/font_1196214_ny3l0dbclr.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><script src="../jscommon/umychart.complier.js"></script><script src="../jscommon/umychart.index.data.js"></script><script src="../jscommon/umychart.style.js"></script><!-- 引入vConsole的JS库 --><script src="../vConsole-3.2.0/dist/vconsole.min.js"></script><script>//预加载下阿里云图片WebFont.load({ custom: { families: ['iconfont'] } });function getURLParams(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return decodeURI(r[2]);return null;}$(window).resize(resizeCanvas);function resizeCanvas(){var height= $(window).height();var width = $(window).width();var divKline=document.getElementById('kline');divKline.style.top=0+'px';divKline.style.left=0+'px';divKline.style.width=(width)+'px';divKline.style.height=(height)+'px';divKline.JSChart.OnSize();}function NetworkFilter(data, callback){console.log('[NetworkFilter] data', data);if (data.Name=='APIScriptIndex::ExecuteScript'){var request=data.Request;if (request.Data.indexname=='多柱子指标'){var hqchart=data.HQChart;// var kData=hqchart.ChartPaint[0].Data;//var closeLine={name:'收盘价线', type:0, data:kData.GetClose() };var bar= { name:'MULTI_BAR', type:1, Draw: { DrawType:'MULTI_BAR', DrawData:[] } //绘制柱子数组};//第一组柱子var point={ Color:'rgb(244,55,50)', //颜色//Type:1,Point:[{Date:20190916, Value:15.5, Value2:0 },{Date:20190917, Value:15.5, Value2:10 }, {Date:20190902, Value:10.5,Value2:0}, //{Date:20190917, Value:15.05},//{Date:20190916, Value:15.5} ] };//第2组柱子var point2={ Color:'rgb(0,55,50)', //颜色Point:[{ Date:20190902, Value:15.5,Value2:0},{ Date:20190903, Value:15.33,Value2:0}, { Date:20190904, Value:15.21,Value2:20} , { Date:20190906, Value:15.05,Value2:0},{ Date:20190909, Value:15.5,Value2:0} ] };bar.Draw.DrawData.push(point2);bar.Draw.DrawData.push(point);var apiData={code:0, stock:{ name:hqchart.Name, symbol:hqchart.Symbol }, //outdata: { date:kData.GetDate() , outvar:[closeLine,line2] } outdata: { outvar:[bar] } };data.PreventDefault=true;console.log('[NetworkFilter::NetworkFilter] apiData ', apiData);callback(apiData);}}}$(function (){var debug=getURLParams('debug');if (debug==1) {var vConsole = new VConsole();console.log('create VConsole');}var symbol=getURLParams('symbol');if (symbol==null) symbol='000001.sz';// 创建股票K线图var chart=JSChart.Init(document.getElementById('kline'));var height= $(window).height();var width = $(window).width();var divKline=document.getElementById('kline');divKline.style.width=width+'px';divKline.style.height=height+'px';chart.OnSize();var option={Type:'历史K线图',//Type:'历史K线图横屏',Windows: [{Index:'MA',},{Index:"多柱子指标", API: {Name:'多柱子指标',Script:null,Args:null, Url:'http://127.0.0.1:18080/api/jsindex' } },], //窗口指标Symbol:symbol,IsAutoUpdate:true,          //是自动更新数据AutoUpdateFrequency:3000,   //数据更新频率//TradeIndex: {Index:'交易系统-BIAS'},    //交易系统NetworkFilter:NetworkFilter,IsShowRightMenu:true,          //右键菜单IsShowCorssCursorInfo:true,    //是否显示十字光标的刻度信息CorssCursorInfo:{ Left:1, Right:1, Bottom:1, IsShowCorss:true, PressTime:300 },  //十字光标刻度设置KLine:{DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择Right:1,                    //复权 0 不复权 1 前复权 2 后复权Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 MaxReqeustDataCount:1000,   //数据个数MaxRequestMinuteDayCount:6,PageSize:90,               //一屏显示多少数据IndexTreeApiUrl:"https://opensourcecache.zealink.com/cache/hqh5/index/commonindextree.json",        //指标树下载地址//Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷//Info:["公告","互动易","调研"],           //信息地雷InfoPosition:1,                         //显示位置KLineDoubleClick:false,              //双击分钟走势图IsShowTooltip:true,                 //是否显示K线提示信息//FirstShowDate:20180401,             //首屏显示的起始日期   DrawType:0,           },KLineTitle: //标题设置{IsShowName:true,       //不显示股票名称IsShowSettingInfo:true //不显示周期/复权},Border: //边框{Left:5,           //左边间距Right:60,       //右边间距Bottom:25,Top:25},Language:"CN",  //英文 'EN' 中文:'CN'ExtendChart:    //扩展图形[{Name:'画图工具',Top:25}],Frame:  //子框架设置 (Height 窗口高度比例值)[{   SplitCount:5,//Height:4,IsShowLeftText:false, IsShowRightText:true},{SplitCount:3,//Height:2,IsShowLeftText:false, IsShowRightText:true},{SplitCount:2,//Height:2,IsShowLeftText:false, IsShowRightText:true}],Overlay:[//{Symbol:'000001.sh', DrawType:0},   //{Symbol:'002415.sz', DrawType:0}],}var windowHeight= $(window).height();var windowWidth = $(window).width();if (windowWidth<=420)   //手机小屏左右不显示坐标{option.Border.Left=1;option.Border.Right=1;option.KLine.IsShowTooltip=false;   //关闭pc端tooltipoption.KLine.Info=null;option.KLine.PageSize=30;   option.ExtendChart=[{Name:'KLineTooltip' }]; //开启手机端tooltip//option.ExtendChart=null;option.IsCorssOnlyDrawKLine=true;option.CorssCursorTouchEnd=true;for(var i in option.Windows){option.Windows[i].Modify=false;option.Windows[i].Change=false;}}chart.SetOption(option);resizeCanvas();})</script>  
</body>  
</html>

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

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

这篇关于HQChart使用教程30-K线图如何对接第3方数据18-如何绘制自定义柱子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/839990。

相关文章

C语言中联合体union的使用

C语言中联合体union的使用

本文编辑整理自： http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union）与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
Lipowerline5.0 雷达电力应用软件下载使用

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com，资源源于网络，本介绍用于学习使用，如有侵权请您联系删除！ 2.新增快速版，简洁易上手 支持快速版和专业版切换使用，快速版界面简洁，保留主
阅读更多...
如何免费的去使用connectedpapers？

如何免费的去使用connectedpapers？

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录（也就是访客模式）4. 两次用完，关闭无痕模式（继续重复步骤 2 - 4） 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址：https://www.connectedpapers.com/ 3. 不需要登录（也就是
阅读更多...
【服务器运维】MySQL数据存储至数据盘

【服务器运维】MySQL数据存储至数据盘

查看磁盘及分区 [root@MySQL tmp]# fdisk -lDisk /dev/sda: 21.5 GB, 21474836480 bytes255 heads, 63 sectors/track, 2610 cylindersUnits = cylinders of 16065 * 512 = 8225280 bytesSector size (logical/physical)
阅读更多...
ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式 需求流程实现步骤定义msg文件编辑配置文件编译 在 ROS 通信协议中，数据载体是一个较为重要组成部分，ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是，这些数据一般只包含一个 data 字段，结构的单一意味着功能上的局限性，当传输一些复杂的数据，比如:
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
以canvas方式绘制粒子背景效果，感觉还可以

以canvas方式绘制粒子背景效果，感觉还可以

这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

st.area_chart 显示区域图。 这是围绕 st.altair_chart 的语法糖。主要区别在于该命令使用数据自身的列和指数来计算图表的 Altair 规格。因此，在许多 "只需绘制此图 "的情况下，该命令更易于使用，但可定制性较差。 如果 st.area_chart 无法正确猜测数据规格，请尝试使用 st.altair_chart 指定所需的图表。 Function signa
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2