4. 颜色风格配置

颜色风格函数说明

切换整体风格函数

JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置 在图形SetOption以前设置到好颜色

js例子

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线图就完成

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)

例子1. 修改Y轴刻度字体

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

例子2. 修改部分黑色风格颜色

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线配置
}

颜色配置项说明

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)";    //平盘文字颜色 

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轴顶部文字向下偏移
    };