HQChart实战教程49-点击修改K线颜色及背景色

最新推荐文章于 2026-07-12 18:21:29 发布
原创 最新推荐文章于 2026-07-12 18:21:29 发布 · 2.8k 阅读 · 1
本文档介绍了如何使用HQChart实现点击K线后改变其颜色和背景色的功能，包括注册点击监听事件、添加自定义颜色K线的步骤，并提供了相关的代码示例和交流群信息。

HQChart实战教程49-点击修改K线颜色及背景色

需求

对点击的K线修改颜色。

效果图

在这里插入图片描述

步骤

1. 注册点击监听事件

事件ID JSCHART_EVENT_ID.ON_CLICK_CHART_PAINT,
注册监听事件见教程 HQChart使用教程5- K线图控件操作函数说明

this.Create=function()
标签
#hqchart #kline #股票
了解本专栏 订阅专栏 解锁全文
HQChart实战教程59-深度图定制Tooltip输出内容
小银
04-04 641
自定义深度图tooltip内容
HQChart实战教程24 - 自定义K线画图工具设置框（线段类）
小银
10-22 2361
HQChart实战教程24 - 自定义K线画图工具设置框画图工具 画图工具 K线上可以通过画图工具在屏幕中进行线段的绘制， 点击已绘制的线段，可以修改线段的颜色，宽度等属性。
HQChart实战教程53-动态指定标识K线区间段背景颜色
小银
05-03 1696
HQChart实战教程53-指定标识K线区间段背景颜色需求效果图步骤1. 创建K线背景色标识类ExtendChart获取K线背景色标识类实例设置K线背景色数据结构设置K线背景色数据交流QQ群: 950092318HQChart代码地址完整的示例代码 需求 动态标识某一个K线区间段的背景颜色（如标识2022-4-01到2022-5-01这个区间段的K线背景色为黄色）， 已达到醒目提示效果。 效果图 步骤 hqchart内置一个K线背景色标识的绘制类，我们可以用它来控制K线的背景颜色 1. 创建K线背景色标识
HQChart分时图(Vue)
09-13
股票实时分时图对接样例, VUE2版本. npm run dev 启动
HQChart实战教程61-自定义十字星K线颜色
小银
05-08 1199
十字星是一种K线基本型态。十字星，是一种只有上下影线，没有实体的K线图。开盘价即是收盘价，表示在交易中，股价出现高于或低于开盘价成交，但收盘价与开盘价相等。其中：上影线越长，表示卖压越重。下影线越长，表示买盘旺盛。通常在股价高位或低位出现十字线，可称为转机线，意味着出现反转。HQChart也支持自定义十字星颜色来满足其他需求。， 在绘制十字星前会触发这个事件。如果还有问题可以加交流QQ群: 950092318。HQChart提供外部自定义十字星的监听事件。一般十字星K线是固定一个颜色的， 如下图。
HQChart分钟K线图(Vue)
10-03
股票K线图对接第3放数据样例, VUE2版本，使用东方财富网页数据 npm run dev 启动
HQChart使用教程4- 如何自定义K线图颜色风格
小银
05-17 1万+
插件配色和主题修改
HQChart使用教程52- 自定义手机端K线图Tooltip
小银
01-03 3235
/派生再setoption里面我可以配置一个外部tooltip创建方法，来替换内置的tooltip.//K线配置信息Type:'历史K线图', //创建图形类型.......ExtendChart: //扩展图形} } //手机端tooltip],这样创建tooltip的时候，就会创建外部的CustomTooltip类了。
HQChart：构建专业级金融图表解决方案的技术架构与实践
最新发布
gitblog_00802的博客
07-12 368
HQChart是一款基于Canvas渲染的高性能金融图表库，专为股票、期货、数字货币等行情分析场景设计。作为国内首个从传统PC股票客户端软件（C++）移植到JavaScript/Python平台的开源项目，它完美融合了**麦语法（分析家语法）指标执行器**与**现代化前端渲染技术**，为开发者提供了从K线图、走势图到专业画图工具的完整解决方案。 针对金融科技开发中面临的三大核心挑战：**跨平台兼
HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据
小银
09-05 7325
K线图如何对接第3方数据3-1分钟K数据协议名称-1分钟K线数据协议日志截图Request 字段说明countsymbolfield返回json数据结构数据截图namesymboldata数据截图 协议名称-1分钟K线数据 对应代码的类名和函数名： KLineChartContainer::ReqeustHistoryMinuteData 协议日志截图 Request 字段说明 Request是......
HQChart使用教程87-HQChart在VUE插件模式下源码调试配置
小银
01-31 2746
HQChart插件模式源码调试配置HQChart开发说明HQChart插件HQChart插件目录说明libsrcVUE源码调试配置2021年最后一篇教程，感谢大家这1年对hqchart的支持，祝大家新年快乐。交流QQ群: 950092318HQChart代码地址 HQChart开发说明 开发语言: 纯js， 只需要记事本+浏览器（f12)就可以开发调试。 设计模型：使用面对对象的设计开发的。 所有的东西都设计成类的模式。 依赖：只使用了jquery 1）使用jquery做为网络通讯，内部以封装了一层网络
HQChart使用教程73-使用Vue3.0创建HQChart图形
小银
03-17 3598
HQChart使用教程73-使用Vue3.0创建HQChart图形序预备知识获取dom元素mountedmethods成员变量结束语demo源码App.vue交流QQ群: 950092318HQChart代码地址个人爱好(模型/摄影) 序 听说Vue3.0发布了， 群里的很多小伙伴们都开始询问HQChart是否可以在Vue3.0里面使用。HQChart是用js裸写开发的， 应该是可以的。 只要根据vue3.0的规则把一个div绑定到hqchart实例上就可以了。我想着这个很简单，就把任务给了页面开发小组，
HQChart使用教程1- 如何快速创建一个K线图页面
热门推荐
小银
05-16 4万+
HQChart是一款支持K线图、走势图及通达信语法指标的金融图表工具，适用于PC端、小程序和移动端。本文介绍如何快速创建K线图页面，提供插件源码地址和示例代码。通过简单配置即可实现日线、周线、月线以及分钟级K线展示，支持叠加指标、画图工具等功能。
HQChart使用教程5- K线图控件操作函数说明
小银
05-17 1万+
HQChart图形操作接口API说明
图表插件vue-hxhchart vue+echarts插件/解决dom无效数据延时获取
IAmNotChangAn的博客
04-07 361
vue2/vue3可用 延时获取数据也可以做到图表实时渲染 vue-hxhchart
HQChart日K线图(Vue)
10-02
股票K线图对接第3放数据样例, VUE2版本，使用东方财富网页数据 npm run dev 启动
HQChart5日分时图(Vue)
09-14
股票实时5日分时图对接样例, 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. 走势图 支持指标 支持沪深和港股 分钟数据显示 支持多日分钟数据显示
HQChart使用教程100-uniapp如何在vue3运行微信小程序
小银
05-30 1510
查了下资料，这个Proxy是vue3特有的，我们只要让它不生成这个Proxy就可以解决这个报错。通过uniapp编译出来的小程序没有”markRaw“这个函数， 看了下uniapp自动生成的verndor.js，内部是有markRaw，只是没有导出，手动加上吧，并且在调用markRaw的地方加上导出的名称。获取画布节点，并且把这个节点赋值给一个变量（this.CanvasNode），由于vue3导致this.CanvasNode最后的值不是原始节点，而是一个Proxy的封装的数值。
HQChart使用教程30-K线图如何对接第3方数据24-如何填充K线背景色
小银
01-08 1543
HQChart使用教程30-K线图如何对接第3方数据24-如何填充K线背景色效果图代码示例json结构说明nametypeDrawDraw.ColorDraw.DrawTypeDraw.DrawDataDraw.Angle交流QQ群HQChart代码地址 效果图 代码示例 function NetworkFilter(data, callback) { console.log('[NetworkFilter] data', data); if (data.Name=='APIScript
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值