如何自定义K线图颜色风格
前几章教程 我们都使用了白色风格的K线图，可能有的小伙伴需要黑色风格或自定义颜色风格， 下面我以切换到黑色风格为例子。
效果图
切换整体风格函数
JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置
接这第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); //设置黑色风格到hqchart
this.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线配置
...............................
}
交流QQ群
如果还又问题可以加交流QQ群: 950092318
HQChart代码地址
地址：https://github.com/jones2000/HQChart
个人爱好(摄影/模型)
