HQChart使用教程4- 如何自定义K线图颜色风格

置顶 HQChart

已于 2023-12-06 16:01:32 修改

阅读量1.1w

点赞数 3

分类专栏： JavaScript HQChart 文章标签： K线图指标 H5 Javascript

于 2019-05-17 10:17:01 首次发布

本文链接：https://blog.csdn.net/jones2000/article/details/90286933

版权

HQChart 同时被 2 个专栏收录

164 篇文章 95 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

如何自定义K线图颜色风格

切换整体风格函数
- uniapp/小程序
修改部分配置颜色
风格配置字段说明
配置项说明
动态切换配色
- 步骤
颜色说明
HQChart开源地址
个人爱好(摄影/模型)

前几章教程我们都使用了白色风格的K线图，可能有的小伙伴需要黑色风格或自定义颜色风格，下面我以切换到黑色风格为例子。
效果图

切换整体风格函数

JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置, 修改全部颜色配置必须放在SetOption前面，否在回无效。
接这第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线配置
    ...............................
 }

在这里插入图片描述

动态切换配色

步骤

修改全局颜色配置
通过**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 });  //动态更新颜色配置

颜色说明

https://github.com/jones2000/HQChart/wiki/4.-%E9%A2%9C%E8%89%B2%E9%A3%8E%E6%A0%BC%E9%85%8D%E7%BD%AE

在这里插入图片描述

HQChart开源地址

https://github.com/jones2000/HQChart

个人爱好(摄影/模型)

在这里插入图片描述

HQChart

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
HQChart使用教程4- 如何自定义K线图颜色风格

如何自定义K线图颜色风格切换整体风格函数前几章教程我们都使用了白色风格的K线图，可能有的小伙伴需要黑色风格或自定义颜色风格，下面我以切换到黑色风格为例子。效果图切换整体风格函数JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置......
复制链接

扫一扫