如何从:root获取CSS变量并配置DevExtreme饼图自定义调色板

解决方案 #

DevExtreme的registerPalette需要传入实际颜色值数组，而非CSS变量字符串，所以需要先从DOM中读取CSS变量对应的真实颜色值，再构建调色板配置。

1. 解析CSS变量并生成调色板配置 #

创建函数读取:root上的CSS变量，转换为DevExtreme可识别的颜色数组：

import { registerPalette } from "devextreme/viz/palette";

// 读取CSS变量对应的实际颜色值
const getCSSPaletteColors = () => {
  const root = document.documentElement;
  // 获取--my-pastel变量的空格分隔变量列表
  const pastelVars = getComputedStyle(root).getPropertyValue('--my-pastel').trim();
  // 分割为单个颜色变量名
  const colorVarList = pastelVars.split(/\s+/);
  // 逐个获取每个变量对应的真实颜色值
  return colorVarList.map(varName => getComputedStyle(root).getPropertyValue(varName).trim());
};

// 构建调色板对象
const MyPastel = {
  simple: getCSSPaletteColors() // simple属性对应饼图等基础图表的调色板数组
};

// 注册调色板
registerPalette("MyPastel", MyPastel);

2. 组件中使用调色板 #

确保注册的调色板名称与组件palette属性值完全一致：

<PieChart
  dataSource={dataSource}
  palette="MyPastel"
>
  <Series
    argumentField="category"
    valueField="value"
  >
    <Label visible={true} />
  </Series>
  <Legend visible={true} />
</PieChart>

关键注意事项 #

• 必须在DOM加载完成后执行调色板注册，建议在React组件的useEffect中执行，避免重复注册：

import { useEffect } from 'react';

useEffect(() => {
  const MyPastel = {
    simple: getCSSPaletteColors()
  };
  registerPalette("MyPastel", MyPastel);
}, []);

内容的提问来源于stack exchange，提问作者Noble String