如何在CanvasXpress Scatter3D图表间固定各分类的colorBy颜色？

很高兴能帮到你！CanvasXpress确实是个超棒的可视化库，用它做3D散点图体验特别好～要让不同图表里的同一分类保持固定颜色，核心是用**自定义颜色映射（colorMap）**来绑定分类和对应的颜色，具体步骤如下：

1. 预先定义全局颜色映射 #

先创建一个颜色映射对象，把你需要固定的分类和对应的颜色一一绑定。颜色可以用十六进制码、RGB值或者标准颜色名称，比如：

// 全局颜色映射，绑定分类和颜色
const fixedColorMap = {
    "setosa": "#ff0000",    // 红色
    "versicolor": "#0000ff", // 蓝色
    "virginica": "#008000"   // 绿色
};

2. 在每个Scatter3D图表中引用这个映射 #

创建图表时，在配置选项里指定colorBy字段（也就是你用来分类的列名），同时把colorMap设置为我们预先定义好的对象。举个完整的示例，假设你有两个鸢尾花数据集的图表：

// 第一个Scatter3D图表
const chart1 = new CanvasXpress("chartContainer1", {
    data: {
        x: ["Species"],
        y: [
            ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width", "Species"],
            [5.1, 3.5, 1.4, 0.2, "setosa"],
            [6.2, 3.4, 5.4, 2.3, "virginica"],
            // 更多数据...
        ]
    },
    config: {
        graphType: "Scatter3D",
        colorBy: "Species", // 指定分类字段
        colorMap: fixedColorMap, // 应用全局颜色映射
        // 其他配置项...
    }
});

// 第二个Scatter3D图表（用不同的子集数据）
const chart2 = new CanvasXpress("chartContainer2", {
    data: {
        x: ["Species"],
        y: [
            ["Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width", "Species"],
            [5.9, 3.0, 4.2, 1.5, "versicolor"],
            [6.7, 3.1, 5.6, 2.4, "virginica"],
            // 更多数据...
        ]
    },
    config: {
        graphType: "Scatter3D",
        colorBy: "Species",
        colorMap: fixedColorMap, // 同样应用全局颜色映射
        // 其他配置项...
    }
});

3. 关键说明 #

• 只要分类名称（比如"setosa"）完全一致，不管数据在不同图表里的顺序如何，对应的颜色都会严格匹配你定义的映射。
• 如果后续新增了分类，只需要在fixedColorMap里添加新的键值对，所有引用这个映射的图表都会自动应用新的颜色规则，保持统一。
• 颜色值支持多种格式，比如"red"、"rgb(255,0,0)"、"rgba(255,0,0,0.8)"都可以，根据你的需求选择就行。

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