HXKLine

主题

常量配置 ​

常量是对styles样式配置里相近属性其值的统一声明，方便使用者一键替换所有相关的样式配置，而不用逐一修改styles对象多级嵌套的子属性。

属性 ​

typescript
/**
 * 样式常量配置
 */
export interface Constants {
  // 涨
  DEFAULT_COLOR_UP: string;
  // 涨1
  DEFAULT_COLOR_UP_1: string;
  // 涨2
  DEFAULT_COLOR_UP_2: string;
  // 涨3
  DEFAULT_COLOR_UP_3: string;
  // 涨4
  DEFAULT_COLOR_UP_4: string;
  // 跌
  DEFAULT_COLOR_DOWN: string;
  // 跌1
  DEFAULT_COLOR_DOWN_1: string;
  // 跌2
  DEFAULT_COLOR_DOWN_2: string;
  // 跌3
  DEFAULT_COLOR_DOWN_3: string;
  // 跌4
  DEFAULT_COLOR_DOWN_4: string;
  // 平
  DEFAULT_COLOR_NOCHANGE: string;
  // 平1
  DEFAULT_COLOR_NOCHANGE_1: string;
  // 平2
  DEFAULT_COLOR_NOCHANGE_2: string;
  // 平3
  DEFAULT_COLOR_NOCHANGE_3: string;
  // 平4
  DEFAULT_COLOR_NOCHANGE_4: string;
  // 主题色
  DEFAULT_PRIMARY_COLOR: string;
  // 主题色1
  DEFAULT_PRIMARY_COLOR_1: string;
  // 主题色2
  DEFAULT_PRIMARY_COLOR_2: string;
  // 主题色3
  DEFAULT_PRIMARY_COLOR_3: string;
  // 主题色4
  DEFAULT_PRIMARY_COLOR_4: string;
  // 默认文字大小
  DEFAULT_FONT_SIZE: number;
  // 默认文字颜色
  DEFAULT_FONT_COLOR: string;
  // 强调文字颜色
  DEFAULT_FONT_COLOR_DEEP: string;
  // 反色文字颜色
  DEFAULT_FONT_COLOR_REVERSE: string;
  // 默认文字字重
  DEFAULT_FONT_WEIGHT: string;
  // 默认文字字体
  DEFAULT_FONT_FAMILY: string;
  // 默认容器背景色
  DEFAULT_CONTAINER_BG_COLOR: string;
  // 默认二级容器背景色
  DEFAULT_CONTAINER_BG_2_COLOR: string;
  // 默认背景半透明遮罩颜色
  DEFAULT_BG_MASK_COLOR: string;
  // 默认分时线颜色
  DEFAULT_LINE_COLOR: string;
  // 默认线1
  DEFAULT_LINE_COLOR_1: string;
  // 默认线2
  DEFAULT_LINE_COLOR_2: string;
  // 默认线3
  DEFAULT_LINE_COLOR_3: string;
  // 默认线4
  DEFAULT_LINE_COLOR_4: string;
  // 默认线5
  DEFAULT_LINE_COLOR_5: string;
  // 默认背景网格线颜色
  DEFAULT_GRID_LINE_COLOR: string;
  // 默认坐标轴、分割线颜色
  DEFAULT_TICK_LINE_COLOR: string;
  // 默认十字光标线颜色
  DEFAULT_CROSSHAIR_LINE_COLOR: string;
  // 默认十字光标提示框背景颜色
  DEFAULT_CROSSHAIR_BG_COLOR: string;
  // 默认虚线类型
  DEFAULT_LINE_DASH_VALUE: number[];
  // 默认工具栏背景色
  DEFAULT_TOOLBAR_BG_COLOR: string;
  // 默认工具栏阴影色
  DEFAULT_TOOLBAR_SHADOW_COLOR: string;
  // 默认工具栏hover背景色
  DEFAULT_TOOLBAR_HOVER_COLOR: string;
  // 默认工具栏active背景色
  DEFAULT_TOOLBAR_ACTIVE_COLOR: string;
  // 默认工具栏盒子描边颜色
  DEFAULT_TOOLBAR_BORDER_COLOR: string;
  // 默认工具栏盒子描边hover颜色
  DEFAULT_TOOLBAR_BORDER_HOVER_COLOR: string;
  // 默认工具栏滑块轨道背景颜色
  DEFAULT_TOOLBAR_SLIDER_TRACK_BG_COLOR: string;
  // 默认工具栏滑块背景颜色
  DEFAULT_TOOLBAR_SLIDER_THUMB_BG_COLOR: string;
}

默认配置 ​

typescript
const defaultConstants: Constants = {
  DEFAULT_COLOR_UP: '#EF5350',
  DEFAULT_COLOR_UP_1: '#802028',
  DEFAULT_COLOR_UP_2: '#CC2F3C',
  DEFAULT_COLOR_UP_3: '#F7525F',
  DEFAULT_COLOR_UP_4: '#FAA1A4',
  DEFAULT_COLOR_DOWN: '#26A69A',
  DEFAULT_COLOR_DOWN_1: '#004D40',
  DEFAULT_COLOR_DOWN_2: '#06806B',
  DEFAULT_COLOR_DOWN_3: '#22ABA8',
  DEFAULT_COLOR_DOWN_4: '#70CCBD',
  DEFAULT_COLOR_NOCHANGE: '#EF5350',
  DEFAULT_COLOR_NOCHANGE_1: '#787B86',
  DEFAULT_COLOR_NOCHANGE_2: '#9598A1',
  DEFAULT_COLOR_NOCHANGE_3: '#B2B5BE',
  DEFAULT_COLOR_NOCHANGE_4: '#D1D4DC',
  DEFAULT_PRIMARY_COLOR: '#2196F3',
  DEFAULT_PRIMARY_COLOR_1: '#143EB2',
  DEFAULT_PRIMARY_COLOR_2: '#1E53E5',
  DEFAULT_PRIMARY_COLOR_3: '#3179FE',
  DEFAULT_PRIMARY_COLOR_4: '#90BFF9',
  DEFAULT_FONT_SIZE: 12,
  DEFAULT_FONT_COLOR: '#76808F',
  DEFAULT_FONT_COLOR_DEEP: '#222222',
  DEFAULT_FONT_COLOR_REVERSE: '#FFFFFF',
  DEFAULT_FONT_WEIGHT: 'normal',
  DEFAULT_FONT_FAMILY: '-apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif',
  DEFAULT_CONTAINER_BG_COLOR: '#FFFFFF',
  DEFAULT_CONTAINER_BG_2_COLOR: '#DDDDDD',
  DEFAULT_BG_MASK_COLOR: 'rgba(0, 0, 0, 0.08)',
  DEFAULT_LINE_COLOR: '#000000',
  DEFAULT_LINE_COLOR_1: '#FF9600',
  DEFAULT_LINE_COLOR_2: '#935EBD',
  DEFAULT_LINE_COLOR_3: '#2196F3',
  DEFAULT_LINE_COLOR_4: '#E11D74',
  DEFAULT_LINE_COLOR_5: '#01C5C4',
  DEFAULT_GRID_LINE_COLOR: '#EDEDED',
  DEFAULT_TICK_LINE_COLOR: '#DDDDDD',
  DEFAULT_CROSSHAIR_LINE_COLOR: '#686D76',
  DEFAULT_CROSSHAIR_BG_COLOR: '#686D76',
  DEFAULT_LINE_DASH_VALUE: [4, 2],
  DEFAULT_TOOLBAR_BG_COLOR: '#FFFFFF',
  DEFAULT_TOOLBAR_SHADOW_COLOR: 'rgba(0, 0, 0, 0.2)',
  DEFAULT_TOOLBAR_HOVER_COLOR: 'rgb(242, 243, 245)',
  DEFAULT_TOOLBAR_ACTIVE_COLOR: 'rgb(229, 230, 235)',
  DEFAULT_TOOLBAR_BORDER_COLOR: '#dbdbdb',
  DEFAULT_TOOLBAR_BORDER_HOVER_COLOR: '#bababa',
  DEFAULT_TOOLBAR_SLIDER_TRACK_BG_COLOR: '#e6e6e6',
  DEFAULT_TOOLBAR_SLIDER_THUMB_BG_COLOR: '#76808F',
};

可以使用overrideDefaultConstants图表 api 修改默认常量。

overrideDefaultConstants(key, value) ​

typescript
(
  key: string | Object,
  value?: any
) => void
  • key 要覆盖的字段名或合并对象
  • value 当 key 为字符串类型时必填，代表覆盖字段的值
typescript
// 新修改默认常量配置：文本大小
HXKlineChart.overrideDefaultConstants('DEFAULT_FONT_SIZE', 10);

WARNING

默认常量修改完后，会自动更新所有已注册的styles主题样式。

主题配置 ​

调色盘和styles样式配置一样，可以注册多套主题并切换；

使用registerConstants(theme, constants)图表 api 来添加一个新的调色盘主题配置。

registerConstants(theme, constants) ​

typescript
(
  // 主题名称
  theme: string,
  // 常量配置
  constants: object
) => void

在注册新的主题配置时，缺少的属性会自动用默认配置补全（白版light），因此，新主题只要填写需要自定义的属性即可。

typescript
// 新注册一个blue主题，希望仅修改主题色，其他常量不变
HXKlineChart.registerConstants('blue', {
  DEFAULT_PRIMARY_COLOR: '#2196F3',
});

如何切换主题 ​

通过setStyles(theme: string)切换样式时，组件内部会自动根据 theme 主题名称，选择对应的常量配置，并覆盖原本的styles.constants样式属性。

内置主题 ​

我们内置了light和dark两套主题常量配置。

typescript
const themeConstants = {
  light: {
    DEFAULT_COLOR_UP: '#EF5350',
    DEFAULT_COLOR_UP_1: '#802028',
    DEFAULT_COLOR_UP_2: '#CC2F3C',
    DEFAULT_COLOR_UP_3: '#F7525F',
    DEFAULT_COLOR_UP_4: '#FAA1A4',
    DEFAULT_COLOR_DOWN: '#26A69A',
    DEFAULT_COLOR_DOWN_1: '#004D40',
    DEFAULT_COLOR_DOWN_2: '#06806B',
    DEFAULT_COLOR_DOWN_3: '#22ABA8',
    DEFAULT_COLOR_DOWN_4: '#70CCBD',
    DEFAULT_COLOR_NOCHANGE: '#EF5350',
    DEFAULT_COLOR_NOCHANGE_1: '#787B86',
    DEFAULT_COLOR_NOCHANGE_2: '#9598A1',
    DEFAULT_COLOR_NOCHANGE_3: '#B2B5BE',
    DEFAULT_COLOR_NOCHANGE_4: '#D1D4DC',
    DEFAULT_PRIMARY_COLOR: '#2196F3',
    DEFAULT_PRIMARY_COLOR_1: '#143EB2',
    DEFAULT_PRIMARY_COLOR_2: '#1E53E5',
    DEFAULT_PRIMARY_COLOR_3: '#3179FE',
    DEFAULT_PRIMARY_COLOR_4: '#90BFF9',
    DEFAULT_FONT_SIZE: 12,
    DEFAULT_FONT_COLOR: '#76808F',
    DEFAULT_FONT_COLOR_DEEP: '#222222',
    DEFAULT_FONT_COLOR_REVERSE: '#FFFFFF',
    DEFAULT_FONT_WEIGHT: 'normal',
    DEFAULT_FONT_FAMILY: '-apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif',
    DEFAULT_CONTAINER_BG_COLOR: '#FFFFFF',
    DEFAULT_CONTAINER_BG_2_COLOR: '#DDDDDD',
    DEFAULT_BG_MASK_COLOR: 'rgba(0, 0, 0, 0.08)',
    DEFAULT_LINE_COLOR: '#000000',
    DEFAULT_LINE_COLOR_1: '#FF9600',
    DEFAULT_LINE_COLOR_2: '#935EBD',
    DEFAULT_LINE_COLOR_3: '#2196F3',
    DEFAULT_LINE_COLOR_4: '#E11D74',
    DEFAULT_LINE_COLOR_5: '#01C5C4',
    DEFAULT_GRID_LINE_COLOR: '#EDEDED',
    DEFAULT_TICK_LINE_COLOR: '#DDDDDD',
    DEFAULT_CROSSHAIR_LINE_COLOR: '#686D76',
    DEFAULT_CROSSHAIR_BG_COLOR: '#686D76',
    DEFAULT_LINE_DASH_VALUE: [4, 2],
    DEFAULT_TOOLBAR_BG_COLOR: '#FFFFFF',
    DEFAULT_TOOLBAR_SHADOW_COLOR: 'rgba(0, 0, 0, 0.2)',
    DEFAULT_TOOLBAR_HOVER_COLOR: 'rgb(242, 243, 245)',
    DEFAULT_TOOLBAR_ACTIVE_COLOR: 'rgb(229, 230, 235)',
    DEFAULT_TOOLBAR_BORDER_COLOR: '#dbdbdb',
    DEFAULT_TOOLBAR_BORDER_HOVER_COLOR: '#bababa',
    DEFAULT_TOOLBAR_SLIDER_TRACK_BG_COLOR: '#e6e6e6',
    DEFAULT_TOOLBAR_SLIDER_THUMB_BG_COLOR: '#76808F',
  },
  // 在Light的基础上，修改默认颜色
  dark: {
    DEFAULT_PRIMARY_COLOR: '#2196F3',
    DEFAULT_FONT_COLOR: '#888888',
    DEFAULT_FONT_COLOR_DEEP: '#f4f4f4',
    DEFAULT_FONT_COLOR_REVERSE: '#FFFFFF',
    DEFAULT_CONTAINER_BG_COLOR: '#191919',
    DEFAULT_CONTAINER_BG_2_COLOR: '#333333',
    DEFAULT_BG_MASK_COLOR: 'rgba(255, 255, 255, 0.08)',
    DEFAULT_LINE_COLOR: '#ffffff',
    DEFAULT_GRID_LINE_COLOR: '#292929',
    DEFAULT_TICK_LINE_COLOR: '#333333',
    DEFAULT_CROSSHAIR_LINE_COLOR: '#999999',
    DEFAULT_CROSSHAIR_BG_COLOR: '#373a40',
    DEFAULT_TOOLBAR_BG_COLOR: '#2a2a2b',
    DEFAULT_TOOLBAR_SHADOW_COLOR: 'rgba(0, 0, 0, 0.6)',
    DEFAULT_TOOLBAR_HOVER_COLOR: 'rgba(255, 255, 255, 0.08)',
    DEFAULT_TOOLBAR_ACTIVE_COLOR: 'rgba(255, 255, 255, 0.12)',
    DEFAULT_TOOLBAR_BORDER_COLOR: '#4d4d4d',
    DEFAULT_TOOLBAR_BORDER_HOVER_COLOR: '#666666',
    DEFAULT_TOOLBAR_SLIDER_TRACK_BG_COLOR: '#494949',
    DEFAULT_TOOLBAR_SLIDER_THUMB_BG_COLOR: '#adadad',
  },
};

WARNING

两个版本字段数量不匹配，这是因为缺失的字段会自动用defaultConstants默认配置合并填充。

白版预览 ​

黑版预览 ​

Released under the Apache License V2.

Copyright © 2023-present B2C-Web