切換整體風格函數

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