-
Notifications
You must be signed in to change notification settings - Fork 744
4. 颜色风格配置
jones edited this page Nov 27, 2023
·
13 revisions
JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置 在图形SetOption以前设置到好颜色
this.Create=function() //创建图形
{
......
var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
JSChart.SetStyle(blackStyle);
this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
......
this.Chart.SetOption(this.Option); //设置K线配置
}这样黑色风格的K线图就完成
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 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.Chart.SetOption(this.Option); //设置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; //收盘价面积|收盘价线|叠加收盘价线 线段宽度this.UpTextColor="rgb(238,21,21)"; //上涨文字颜色
this.DownTextColor="rgb(25,158,0)"; //下跌文字颜色
this.UnchagneTextColor="rgb(0,0,0)"; //平盘文字颜色 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)" //持仓
};this.KLine=
{
MaxMin:
{
Font:12*GetDevicePixelRatio() +'px 微软雅黑',
Color:'rgb(43,54,69)',
RightArrow:"→",
LeftArrow:"←",
HighYOffset:0,
LowYOffset:0
}, //K线最大最小值显示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轴顶部文字向下偏移
YTextPadding:[2,2] //Y轴文字和边框间距 [0=左侧] [1=右侧]
};this.Minute={};
this.Minute.VolBarColor=null; //分时图成交量柱子颜色 默认不用, 设置了柱子就不是红绿了
this.Minute.VolTitleColor="rgb(105,105,105)";
this.Minute.PriceColor="rgb(50,171,205)"; //分时图价格线颜色
this.Minute.PriceLineWidth=1*GetDevicePixelRatio(); //价格线宽度
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轴最新价格刻度颜色
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
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)", //成交金额
}; this.TitleFont=13*GetDevicePixelRatio() +'px 微软雅黑'; //指标显示,tooltip显示字体
this.IndexTitleBGColor='rgb(250,250,250)'; //指标名字背景色
this.IndexTitleBorderColor='rgb(180,180,180)'; //指标名字边框颜色
this.IndexTitleBorderMoveOnColor='rgb(0,0,0)'; //指标名字边框颜色(鼠标在上面)
this.IndexTitleColor="rgb(43,54,69)"; //指标名字颜色
this.IndexTitleSelectedColor="rgb(65,105,225)";
this.OverlayIndexTitleBGColor='rgba(255,255,255,0.7)';
this.IndexTitleMerginLeft=1; //指标输出左边间距