如何修改Ant Design Chart中图例与柱状图标签的颜色？

图例字体颜色修正 #

你之前的图例配置写法不符合Ant Design Charts的规范，该库基于G2Plot封装，图例文本的样式需要通过legend.itemName.style指定，若存在图例标题，可额外通过legend.title.style设置标题颜色：

"legend": {
  "display": true,
  "padding": [10, 15, 10, 15],
  "itemSpacing": 20,
  "itemMarginBottom": 60,
  // 设置图例项文本颜色
  "itemName": {
    "style": {
      "fill": "red"
    }
  },
  // 若有图例标题，添加此配置修改标题颜色
  "title": {
    "style": {
      "fill": "red"
    }
  }
}

X轴底部标签颜色修改 #

要修改图表底部的X轴标签字体颜色，需在配置中新增xAxis节点，通过xAxis.label.style.fill配置：

"xAxis": {
  "label": {
    "style": {
      "fill": "red"
    }
  }
}

完整配置示例 #

{
  "stack": true,
  "legend": {
    "display": true,
    "padding": [10, 15, 10, 15],
    "itemSpacing": 20,
    "itemMarginBottom": 60,
    "itemName": {
      "style": {
        "fill": "red"
      }
    }
  },
  "xAxis": {
    "label": {
      "style": {
        "fill": "red"
      }
    }
  },
  "style": {
    "padding": 10
  },
  "layout": {
    "padding": 20
  },
  "interaction": {
    "tooltip": {
      "shared": true
    }
  },
  "data": [
    // 你的数据内容
  ],
  "xField": "Date",
  "yField": "Count",
  "colorField": "StackedBy"
}

额外说明 #

Ant Design Charts的配置体系与G2Plot完全对齐，若官方文档不全，可参考G2Plot对应图表类型的配置项来调整更多样式。

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