切换整体风格函数
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线配置
}
颜色配置项说明
K线颜色
this.UpBarColor="rgb(238,21,21)"; //上涨柱子颜色
this.DownBarColor="rgb(25,158,0)"; //下跌柱子颜色
this.UnchagneBarColor="rgb(0,0,0)"; //平盘柱子颜色
this.EmptyBarBGColor="rgb(255,255,255)"; //空心柱子背景色
this.CloseLineColor='rgb(0,191,255)'; //收盘价线颜色
this.CloseLineAreaColor=['rgba(0,191,255,0.8)','rgba(0,191,255,0.2)']; //收盘价面积图颜色
this.CloseLineWidth=2; //收盘价面积图颜色线段宽度
K线价格文字输出颜色
this.UpTextColor="rgb(238,21,21)"; //上涨文字颜色
this.DownTextColor="rgb(25,158,0)"; //下跌文字颜色
this.UnchagneTextColor="rgb(0,0,0)"; //平盘文字颜色
K线标题栏信息
this.Title={
TradeIndexColor:'rgb(105,105,105)', //交易指标颜色
ColorIndexColor:'rgb(112,128,144)', //五彩K线颜色
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)" //持仓
};
K线图最大最小值文字颜色
this.KLine={
MaxMin: {Font:12*GetDevicePixelRatio() +'px 微软雅黑',Color:'rgb(43,54,69)', RightArrow:"→", LeftArrow:"←", HighYOffset:0, LowYOffset:0}, //K线最大最小值显示
X，Y轴刻度信息颜色
this.FrameBorderPen="rgb(225,236,242)"; //边框颜色
this.FrameSplitPen="rgb(225,236,242)"; //刻度分割线
this.FrameDotSplitPen='rgb(105,105,105)'; //分割虚线
this.FrameYLineDash= null; //[5*GetDevicePixelRatio(), 5*GetDevicePixelRatio()]; //Y轴线段虚线点间距,填null 就是实线
this.FrameXLineDash= null; //[5*GetDevicePixelRatio(), 5*GetDevicePixelRatio()]; //X轴线段虚线点间距,填null 就是实线
this.FrameSplitTextColor="rgb(117,125,129)"; //刻度文字颜色
this.FrameSplitTextFont=14*GetDevicePixelRatio() +"px 微软雅黑"; //坐标刻度文字字体
this.FrameTitleBGColor="rgb(246,251,253)"; //标题栏背景色
this.Frame={
XBottomOffset:1*GetDevicePixelRatio(), //X轴文字向下偏移
YTopOffset:2*GetDevicePixelRatio() //Y轴顶部文字向下偏移
};
分时图颜色
this.Minute={};
this.Minute.VolBarColor=null; //分时图成交量柱子颜色 默认不用, 设置了柱子就不是红绿了
this.Minute.VolTitleColor="rgb(105,105,105)";
this.Minute.PriceColor="rgb(50,171,205)"; //分时图价格线颜色
this.Minute.AreaPriceColor='rgba(50,171,205,0.1)'; //价格的面积图
this.Minute.AvPriceColor="rgb(238,127,9)"; //分时图均价线颜色
this.Minute.PositionColor='rgb(218,165,32)'; //持仓量线段颜色
this.Minute.FrameSplitTextColor=null; //刻度文字颜色 (缺省使用 this.FrameSplitTextColor)
this.Minute.Before=
{
BGColor:'rgba(240,240,240,0.7)', //分钟 集合竞价背景
LineColor:"rgb(50,171,205)", //集合竞价线段颜色
VolColor:["rgb(192,192,0)"], //成交量其他的颜色 colorID=3 开始
AvPriceColor:'rgb(190,190,190)', //均线
Point:{ Color:"rgb(65,105,225)", Radius:2*GetDevicePixelRatio() },
CloseIcon:
{
Family:'iconfont',
Text:"\ue60c",
Color:"rgb(112,128,144)",
Size:12
} //关闭按钮
};
Y轴最新价格刻度颜色
//Y轴最新价格刻度颜色
this.FrameLatestPrice = {
TextColor:'rgb(255,255,255)', //最新价格文字颜色
UpBarColor:"rgb(238,21,21)", //上涨
DownBarColor:"rgb(25,158,0)", //下跌
UnchagneBarColor:"rgb(0,0,0)", //平盘
BGAlpha:0.6
};
十字光标颜色
this.CorssCursorBGColor="rgb(43,54,69)"; //十字光标背景
this.CorssCursorTextColor="rgb(255,255,255)"; //十字光文字颜色
this.CorssCursorTextFont=14*GetDevicePixelRatio() +"px 微软雅黑";
this.CorssCursorHPenColor="rgb(130,130,130)"; //十字光标线段颜色(水平)
this.CorssCursorVPenColor="rgb(130,130,130)"; //十字光标线段颜色(垂直)
this.CorssCursorXRangeBGColor="rgba(100,149,237,0.3)"; //十字光标X轴访问背景色
this.CorssCursor=
{
RightButton : //十字光标右侧按钮
{
BGColor:'rgb(43,54,69)', //按钮颜色
PenColor:'rgb(255,255,255)', //按钮边框颜色
Icon: { Text:'\ue6a3', Color:'rgb(255,255,255)', Family:"iconfont", Size:18 } //按钮图标颜色
}
};
手机端tooltip颜色
//手机端tooltip
this.TooltipPaint = {
BGColor:'rgba(250,250,250,0.8)', //背景色
BorderColor:'rgb(120,120,120)', //边框颜色
TitleColor:'rgb(120,120,120)', //标题颜色
TitleFont:13*GetDevicePixelRatio() +'px 微软雅黑', //字体
DateTimeColor:'rgb(210,210,210)',
VolColor:"rgb(210,210,210)", //标题成交量
AmountColor:"rgb(210,210,210)", //成交金额
};
y轴顶部刻度文字向下偏移
function JSChartResource()
{
.............................
this.Frame={
.......
YTopOffset:2*GetDevicePixelRatio() //Y轴顶部文字向下偏移
};
}
X轴底部刻度文字，向下偏移
function JSChartResource()
{
.............................
this.Frame={
.......
XBottomOffset:1*GetDevicePixelRatio(), //X轴文字向下偏移
};
}
动态切换配色
步骤
- 修改全局颜色配置
- 通过**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 }); //动态更新颜色配置
交流QQ群
如果还又问题可以加交流QQ群: 950092318
HQChart代码地址
个人爱好(摄影/模型)
