切换整体风格函数

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

风格配置字段说明

我们给的黑色风格模板在 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)",
    AvPriceColor: "rgb(255,236,0)",
  },


  DefaultTextColor: "rgb(101,104,112)",
  DefaultTextFont: 14*GetDevicePixelRatio() +'px 微软雅黑',
  TitleFont: 13*GetDevicePixelRatio() +'px 微软雅黑',    //标题字体(动态标题 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)",      //标题栏背景色

  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;
  }
}

如果还又问题可以加交流QQ群: 950092318

HQChart代码地址

地址：https://github.com/jones2000/HQChart