练习3：自定义配色方案

在 Superset 仪表板中我们可以通过修改仪表板的配色方案来修改图表中的颜色，Superset 内置了许多的配色方案，但如果我们想要定制自己的配色方案，Superset 就没有这样的功能，只能通过修改代码添加自定义的配色方案。

提示：也可以通过修改仪表板 Json 元数据的"label_colors"字段，修改指定标签的颜色，如：

"label_colors": {"Small": "blue"}

编写代码​

Superset 中仪表板配色相关的代码在superset-frontend/packages/superset-ui-core/src/color文件夹下，其中 colorSchemes 文件夹下的文件就是我们定义配色方案的文件。 categorical文件夹下的是具体的配色方案，sequential文件夹下的是线性、渐变的颜色（常用于热力图这种图表上）。

定义配色方案​

接下来在categorical文件夹下创建一个自定义的配色方案。

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/customizeColors.ts

import CategoricalScheme from '../../CategoricalScheme';

const schemes = [
  {
    id: 'customizeColors',
    label: 'Customize Colors',
    colors: [
      '#2caffe',
      '#544fc5',
      '#00e272',
      '#fe6a35',
      '#6b8abc',
      '#d568fb',
      '#2ee0ca',
      '#fa4b42',
      '#feb56a',
      '#91e8e1',
    ],
  },
].map(s => new CategoricalScheme(s));

export default schemes;

在 index.ts 中导出

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/index.ts

export { default as CategoricalCustomizeColors } from './customerColors';

 

在sequential文件夹下创建一个自定义的线性配色方案。

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/sequential/customizeSequential.ts

import SequentialScheme from '../../SequentialScheme';

const schemes = [
  {
    id: 'customize_seq',
    label: 'Customize Sequential',
    isDiverging: false,
    colors: ['#e0ffff', '#5ab1ef'],
  },
].map(s => new SequentialScheme(s));

export default schemes;

然后在 index.ts 中导出

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/index.ts

export { default as SequentialCustomize } from './customerSequential';

注册配色方案​

配色方案的注册在 setupColors.ts 这个文件中：

superset-frontend/src/setup/setupColors.ts

import {
  CategoricalCustomizeColors,
  SequentialCustomize,
} from '@superset-ui/core';


export default function setupColors(
  extraCategoricalColorSchemeConfigs: ColorSchemeConfig[] = [],
  extraSequentialColorSchemeConfigs: SequentialSchemeConfig[] = [],
) {
  const extraCategoricalColorSchemes = extraCategoricalColorSchemeConfigs.map(
    config =>
      new CategoricalScheme({ ...config, group: ColorSchemeGroup.Custom }),
  );
  const extraSequentialColorSchemes = extraSequentialColorSchemeConfigs.map(
    config => new SequentialScheme(config),
  );
  registerColorSchemes(
    // @ts-ignore
    getCategoricalSchemeRegistry(),
    [
      ...CategoricalAirbnb,
      ...CategoricalD3,
      ...CategoricalEcharts,
      ...CategoricalGoogle,
      ...CategoricalLyft,
      ...CategoricalPreset,
      ...CategoricalSuperset,
      ...CategoricalPresetSuperset,
      ...CategoricalModernSunset,
      ...CategoricalColorsOfRainbow,
      ...CategoricalBlueToGreen,
      ...CategoricalRedToYellow,
      ...CategoricalWavesOfBlue,
      ...CategoricalCustomizeColors,  // 注册自定义配色方案
      ...extraCategoricalColorSchemes,
    ],
    'supersetColors',
  );
  registerColorSchemes(
    // @ts-ignore
    getSequentialSchemeRegistry(),
    [
      ...SequentialCommon,
      ...SequentialD3,
      ...SequentialCustomize, // 注册自定义线性配色方案
      ...extraSequentialColorSchemes,
    ],
    'superset_seq_1',
  );
}

效果展示​