如何自定义K线图颜色风格

切换整体风格函数
- uniapp/小程序
修改部分配置颜色
风格配置字段说明
配置项说明
- y轴顶部刻度文字向下偏移
- X轴底部刻度文字，向下偏移
- K线标题字段配色修改
- PC端tooltip颜色修改
动态切换配色
- 步骤
HQChart开源地址
个人爱好(摄影/模型)

前几章教程我们都使用了白色风格的K线图，可能有的小伙伴需要黑色风格或自定义颜色风格，下面我以切换到黑色风格为例子。
效果图

切换整体风格函数

JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置, 修改全部颜色配置必须放在SetOption前面，否在回无效。
接这第1章把demo页面创建好在create（）函数里面增加风格设置

this.Create=function()  //创建图形{var self=this;$(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置JSChart.SetStyle(blackStyle);this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景this.OnSize();  //让K线全屏this.Chart.SetOption(this.Option);  //设置K线配置}

这样黑色风格的K线图就完成

uniapp/小程序

import { JSCommon } from '../../umychart.uniapp/umychart.wechat.3.0.js';
import {JSCommonHQStyle} from '../../umychart.uniapp/umychart.style.wechat.js'..........var blackStyle=JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);
JSCommon.JSChart.SetStyle(blackStyle);  <style>
把整个页面background-color改成黑色的
</style>

修改部分配置颜色

JSChart.GetResource() 返回当前所有的配色信息数据，你可以直接在返回的变量里找到需要修改的字段进行修改。颜色是用rgb(xxx,xxx,xxx)

var resource=JSChart.GetResource();
resource.FrameSplitTextFont='30x 微软雅黑';//需改刻度的输出字体
//注意修改颜色 必须放在图形初始化前
var chart=JSChart.Init(document.getElementById('kline'));

修改部分黑色风格颜色

this.Create=function()  //创建图形{var self=this;$(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置blcakStyle.UpBarColor='rgb(255,0,0)';     //修改阳线柱子颜色JSChart.SetStyle(blackStyle);     //设置黑色风格到hqchartthis.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景this.OnSize();  //让K线全屏this.Chart.SetOption(this.Option);  //设置K线配置}

风格配置字段说明

我们给的黑色风格模板在 jscommon/umychart.style.js 这个文件里面

var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID);
// 如果要修改某几个颜色 直接修改blackStyle里面的变量就可以， 自己创建一个新的风格模板变量

我们看下颜色风格模板文件的内容里面具体变量对应颜色都有说明
需要注意的是, 字段大小需要乘以页面的放大倍数（window.devicePixelRatio），手机屏一般会放大2-3倍的，所以字段也需要放大，否则在手机上显示就很小

/*不同风格行情配置文件!!手机上字体大小需要*分辨率比
*/function GetDevicePixelRatio()
{return window.devicePixelRatio || 1;
}//黑色风格
var BLACK_STYLE=
{BGColor:'rgb(0,0,0)', //背景色TooltipBGColor: "rgb(255, 255, 255)", //背景色TooltipAlpha: 0.92,                  //透明度SelectRectBGColor: "rgba(1,130,212,0.06)", //背景色//  SelectRectAlpha: 0.06;                  //透明度//K线颜色UpBarColor: "rgb(238,21,21)",   //上涨DownBarColor: "rgb(25,158,0)",  //下跌UnchagneBarColor: "rgb(228,228,228)", //平盘Minute: {VolBarColor: "rgb(255,236,0)", //分时图成交量柱子颜色（已经不用了 使用红绿柱)PriceColor: "rgb(25,180,231)",    //分时图价格线颜色AreaPriceColor:"rgba(63,158,255,.3)",   //价格的面积图AvPriceColor: "rgb(255,236,0)",   //分时图均价线颜色PositionColor:'rgb(218,165,32)',    //持仓量线段颜色},DefaultTextColor: "rgb(101,104,112)",DefaultTextFont: 14*GetDevicePixelRatio() +'px 微软雅黑',TitleFont: 13*GetDevicePixelRatio() +'px 微软雅黑',    //标题字体(动态标题 K线及指标的动态信息字体)//K线信息文字UpTextColor: "rgb(238,21,21)",   //上涨DownTextColor: "rgb(25,158,0)",   //下跌UnchagneTextColor: "rgb(101,104,112)",//平盘CloseLineColor: 'rgb(178,34,34)', //收盘价线FrameBorderPen: "rgba(236,236,236,0.13)",     //边框FrameSplitPen: "rgba(236,236,236,0.13)",          //分割线FrameSplitTextColor: "rgb(101,104,112)",     //刻度文字颜色FrameSplitTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑",        //坐标刻度文字字体FrameTitleBGColor: "rgb(0,0,0)",      //标题栏背景色Frame:{ XBottomOffset:1*GetDevicePixelRatio() },   //X轴文字向下偏移CorssCursorBGColor: "rgb(43,54,69)",            //十字光标背景CorssCursorTextColor: "rgb(255,255,255)",CorssCursorTextFont: 12*GetDevicePixelRatio() +"px 微软雅黑",CorssCursorPenColor: "rgb(130,130,130)",           //十字光标线段颜色KLine:{MaxMin: { Font: 12*GetDevicePixelRatio() +'px 微软雅黑', Color: 'rgb(111,111,111)' },   //K线最大最小值显示Info:  //信息地雷{Color: 'rgb(205,149,12)',TextColor: '#afc0da',TextBGColor: '#1a283e',}},Index: {      LineColor:  //指标线段颜色["rgb(255,189,09)","rgb(22,198,255)","rgb(174,35,161)","rgb(236,105,65)","rgb(68,114,196)","rgb(229,0,79)","rgb(0,128,255)","rgb(252,96,154)","rgb(42,230,215)","rgb(24,71,178)",],NotSupport: { Font: "14px 微软雅黑", TextColor: "rgb(52,52,52)" }},ColorArray:       //自定义指标默认颜色["rgb(255,174,0)","rgb(25,199,255)","rgb(175,95,162)","rgb(236,105,65)","rgb(68,114,196)","rgb(229,0,79)","rgb(0,128,255)","rgb(252,96,154)","rgb(42,230,215)","rgb(24,71,178)",],DrawPicture:  //画图工具{LineColor: "rgb(30,144,255)",PointColor: "rgb(105,105,105)",}};var STYLE_TYPE_ID=
{BLACK_ID:1, //黑色风格
}function HQChartStyle()
{}HQChartStyle.GetStyleConfig=function(styleid)    //获取一个风格的配置变量
{switch (styleid){case STYLE_TYPE_ID.BLACK_ID:return BLACK_STYLE;default:return null;}
}

配置项说明

y轴顶部刻度文字向下偏移

function JSChartResource()
{.............................this.Frame={ .......YTopOffset:2*GetDevicePixelRatio()      //Y轴顶部文字向下偏移};
}

X轴底部刻度文字，向下偏移

function JSChartResource()
{.............................this.Frame={ .......XBottomOffset:1*GetDevicePixelRatio(),  //X轴文字向下偏移};
}

K线标题字段配色修改

源码位置：

/
//   全局配置颜色
//
//
function JSChartResource()
{........................this.Title={..............................VolColor:"rgb(43,54,69)",       //标题成交量AmountColor:"rgb(43,54,69)",    //成交金额 DateTimeColor:"rgb(43,54,69)",  //时间,日期  SettingColor:"rgb(43,54,69)",   //周期,复权NameColor:"rgb(43,54,69)" ,     //股票名称TurnoverRateColor:'rgb(43,54,69)',       //换手率PositionColor:"rgb(43,54,69)"       //持仓};
........................
}

外部修改例子

this.Create=function()  //创建图形
{........................................     //获取全局颜色配置，并修改      var resource=JSChart.GetResource();resource.Title.VolColor='rgb(0,0,255)';resource.Title.AmountColor='rgb(255,193,37)';resource.Title.SettingColor='rgb(139,69,19)';resource.Title.NameColor='rgb(255, 0, 255)';resource.Title.DateTimeColor='rgb(178,34,34)';resource.Title.TurnoverRateColor='rgb(250,128,114)';resource.Title.PositionColor='rgb(70,130,180)';...................................this.Chart.SetOption(this.Option);  //设置K线配置................................
}

实例效果图

PC端tooltip颜色修改

PC端的tooltip是一个div, 背景色,透明度, 字段值颜色，高度通过hqchart全局资源设置,其他都是通过css设置.
css 在 \jscommon\umychart.resource\css\tools.css

/*tooltip的外层样式*/
.jschart-tooltip{box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.23);border: solid 1px rgba(200, 210, 219, 0.92);padding:7px 20px 15px 13px;box-sizing: border-box;position:relative;display: none;z-index: 9;
}/*tooltip的内层样式*/
.tooltip-title{color:#2b3645;font-family: 微软雅黑;font-size:12px;text-align:center;display: block;line-height: 24px;
}
.tooltip-con{color:#2b3645;font-family: 微软雅黑;font-size:12px;line-height: 24px;
}
.tooltip-num{font-family: 微软雅黑;font-size:12px;line-height: 24px;text-align: right;display:inline-block;width:90px;
}

pc端tooltip全局资源配置修改项
注意:版本号1.9134以后的才支持

this.Create=function()  //创建图形
{var resource=JSChart.GetResource();//pc端tooltip设置resource.TooltipBGColor="rgb(187,255,255)"; //背景色resource.TooltipAlpha=0.9;  //透明度resource.PCTooltip.LineHeight=25; //单行高度设置resource.Title.VolColor='rgb(0,0,255)';   //成交量resource.Title.AmountColor='rgb(255,193,37)';  //成交金额resource.Title.TurnoverRateColor='rgb(250,128,114)';   //换手率resource.Title.PositionColor='rgb(70,130,180)'; //持仓.......................this.Chart.SetOption(this.Option);  //设置K线配置...............................}

动态切换配色

步骤

修改全局颜色配置
通过**ReloadResource()**重新加载全局颜色配置
ReloadResource(obj)
obj={ Resource: 预留变量填(null), Draw:是否立即重绘 , Update:是否重新计算并重绘 }

VUE例子


import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'..........................
var resource=HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //黑色风格
HQChart.Chart.JSChart.SetStyle(resource);  //设置全局颜色配置
this.$refs.kline.style.backgroundColor="rgb(0,0,0);   //修改div背景色
this.Chart.ReloadResource({ Resource:null, Draw:true , Update:true });  //动态更新颜色配置

HQChart开源地址

https://github.com/jones2000/HQChart

个人爱好(摄影/模型)

HQChart使用教程4- 如何自定义K线图颜色风格相关推荐

HQChart使用教程11-如何把K线数据API替换成自己的API数据
HQChart使用教程11-如何把K线数据API替换成自己的API数据设置API域名 Vue: uniapp: HQChart代码地址 HQChart只提供前端行情展示, 不提供行情API数据,De ...
HQChart实战教程23 - 点击K线显示历史分钟走势图
HQChart实战教程23 - 点击K线显示历史分钟走势图需求步骤 1. 注册K线点击监听事件 2. 点击监听函数使用网路回调函数请求历史分钟交流QQ群:950092318 HQChart代码 ...
HQChart实战教程29-A股日K线数据对接-Vue版本
HQChart实战教程29-A股日K线数据对接-Vue版本日线数据对接预备知识步骤 1. HQChart数据回调函数部分代码 2. 全量数据对接部分代码数据截图 3. 增量数据更新部分代码 ...
HQChart实战教程30-A股日K线数据对接-uniapp版本
HQChart实战教程30-A股日K线数据对接-uniapp版本日线数据对接预备知识创建K线图教程步骤 1. HQChart数据回调函数部分代码 2. 全量数据对接部分代码 3. 增量数据更 ...
HQChart实战教程34-A股日K线数据对接-小程序版本
HQChart实战教程34-A股日K线数据对接-小程序版本日线数据对接预备知识步骤 1. 安装hqchart 2. 在创建画布元素 3. HQChart数据回调函数部分代码 4. 全量数据对接 ...
HQChart使用教程9- 如何快速创建K线训练页面
HQChart使用教程9- 如何快速创建K线训练页面 K线训练已重构新版本使用详见 demo页面部分代码 Option的配置项说明注册K线训练K线移动的监听 K线训练操作接口 HQChart代码地址 ...
plotly基于dataframe数据绘制股票自定义K线图
plotly基于dataframe数据绘制股票自定义K线图 # 绘制蜡烛图并自定义可视化形式: import plotly as py import plotly.graph_objs as go ...
HQChart实战教程61-自定义十字星K线颜色
HQChart实战教程61-自定义平盘K线颜色十字星步骤 1. 注册事件 2. 监听回调函数阐述说明 HQChart插件源码地址完整的demo源码十字星十字星是一种K线基本型态.十字星,是一 ...
AXURE教程：中继器制作K线图
K线图应用于股票.贵金属.期货等等的金融交易中,所以K线图成了金融交易软件必不可少的一个元件. 目前市面上的k线图原型都是图片,不能让老板或者甲方爸爸更直观的看到交互效果:所以作者出了这期教程,教你们 ...

HQChart使用教程4- 如何自定义K线图颜色风格