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。

相关文章

Python获取中国节假日数据记录入JSON文件

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢？我尝试一种更为智能的方法：P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验，
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Linux换行符的使用方法详解

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将
阅读更多...
使用Jackson进行JSON生成与解析的新手指南

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON（序列化）2.2 JSON 转对象（反序列化）3.
阅读更多...
使用Python实现快速搭建本地HTTP服务器

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》：本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.
阅读更多...
Elasticsearch 在 Java 中的使用教程

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J
阅读更多...
使用C#代码在PDF文档中添加、删除和替换图片

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当
阅读更多...
Linux系统中卸载与安装JDK的详细教程

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1
阅读更多...
Java中List的contains()方法的使用小结

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论：List 的 contain
阅读更多...
C#使用SQLite进行大数据量高效处理的代码示例

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入：从乌龟到猎豹的蜕变分页查询：加载百万数据异步处理：拒绝界面
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2