如何通过CSS自定义Amcharts 5图表？寻求Canvas模式下的样式方案

Amcharts 5 基于 Canvas 整体渲染，所有图表元素都绘制在 Canvas 画布内，无法像 v4 那样通过 CSS 选择器直接选中单个元素修改样式。必须通过其内置的配置 API 来实现颜色、标签及其他元素的自定义，以下是常用场景的实现代码：

1. 自定义图表核心颜色 #

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

// 初始化根实例
const root = am5.Root.new("chartdiv");

// 设置图表背景色
root.set("background", am5.Rectangle.new(root, {
  fill: am5.color("#f5f7fa")
}));

// 创建 XY 图表
const chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  wheelX: "zoomX"
}));

// 为多系列配置自定义颜色集合
chart.set("colors", am5.ColorSet.new(root, {
  colors: [
    am5.color("#2563eb"),
    am5.color("#16a34a"),
    am5.color("#f59e0b"),
    am5.color("#ef4444")
  ]
}));

// 单个系列自定义颜色
const columnSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "销量",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  categoryXField: "month",
  fill: am5.color("#2563eb"), // 柱子填充色
  stroke: am5.color("#1d4ed8"), // 柱子边框色
  strokeWidth: 2
}));

2. 自定义标签样式 #

// X 轴标签自定义
const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "month",
  renderer: am5xy.AxisRendererX.new(root, {
    minGridDistance: 30
  }),
  // 轴标签样式
  label: am5.Label.new(root, {
    fill: am5.color("#374151"),
    fontSize: 13,
    fontWeight: "500"
  })
}));

// 数据标签自定义（柱子上的数值标签）
columnSeries.labels.template.setAll({
  text: "{valueY}",
  fill: am5.color("#ffffff"),
  fontSize: 12,
  fontWeight: "bold",
  centerX: am5.p50,
  centerY: am5.p50
});

// 图表标题自定义
chart.children.unshift(am5.Label.new(root, {
  text: "月度销量统计",
  fontSize: 20,
  fontWeight: "bold",
  fill: am5.color("#1f2937"),
  x: am5.percent(50),
  centerX: am5.percent(50),
  paddingBottom: 18
}));

3. 自定义交互元素样式 #

// Tooltip 样式自定义
chart.set("tooltip", am5.Tooltip.new(root, {
  labelFill: am5.color("#ffffff"),
  backgroundFill: am5.color("#1f2937"),
  borderRadius: 6,
  paddingTop: 10,
  paddingBottom: 10,
  paddingLeft: 14,
  paddingRight: 14
}));

// 光标样式自定义
chart.set("cursor", am5xy.XYCursor.new(root, {
  behavior: "zoomX",
  lineX: am5.Line.new(root, {
    stroke: am5.color("#2563eb"),
    strokeWidth: 2,
    strokeDasharray: [4, 4]
  })
}));

动态修改样式 #

如果需要在运行时调整样式，直接调用元素的 set() 方法即可：

// 动态修改柱子颜色
columnSeries.set("fill", am5.color("#ef4444"));
// 动态调整数据标签大小
columnSeries.labels.template.set("fontSize", 14);

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