Skip to content

4. 颜色风格配置

jones edited this page Oct 26, 2021 · 17 revisions

函数说明

切换整体风格函数

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

Clone this wiki locally