如何为Frappe Charts的所有X、Y轴标签上色（CSS选择器方案）

方法一：更鲁棒的CSS选择器 #

你之前的通配符写法不符合CSS选择器规范，改用属性前缀匹配和类选择器就能覆盖所有图表的轴标签：

/* 匹配所有ID以frappe-chart-开头的图表，设置X/Y轴标签颜色 */
[id^="frappe-chart-"] .x.axis text,
[id^="frappe-chart-"] .y.axis text {
    fill: #333; /* 替换成你需要的颜色值 */
}

• [id^="frappe-chart-"]：匹配所有ID以frappe-chart-开头的容器，不管后面是0、1还是其他数字
• .x.axis text 和 .y.axis text：直接选中所有X轴、Y轴容器下的文本标签，不需要依赖固定的子元素位置（避免子元素数量变化导致选择器失效）

方法二：用Frappe Charts官方配置（更推荐） #

直接通过图表初始化时的配置项设置标签样式，比修改CSS更稳定，不会因为图表DOM结构变化失效：

// 示例：初始化单个图表时配置轴标签颜色
const chart1 = new frappe.Chart("#frappe-chart-0", {
    data: { /* 你的数据 */ },
    type: "bar", // 图表类型
    axisOptions: {
        xAxis: {
            labelStyle: {
                fill: "#666" // X轴标签颜色
            }
        },
        yAxis: {
            labelStyle: {
                fill: "#666" // Y轴标签颜色
            }
        }
    }
});

// 如果是多个图表，可以循环批量初始化
const chartIds = ["frappe-chart-0", "frappe-chart-1", "frappe-chart-2"];
chartIds.forEach(id => {
    new frappe.Chart(`#${id}`, {
        data: { /* 对应图表的数据 */ },
        type: "bar",
        axisOptions: {
            xAxis: { labelStyle: { fill: "#666" } },
            yAxis: { labelStyle: { fill: "#666" } }
        }
    });
});

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