如何修改amCharts中tooltip文本的字号？Angular项目技术求助

在amCharts v5中，Tooltip的文本样式需要通过其内部的label元素来配置，以下是两种可行的方案：

方案一：创建Tooltip时直接配置Label样式 #

在初始化Tooltip时，通过label配置项直接指定字体大小，同时保留原有文本内容：

const tooltip = am5.Tooltip.new(this.root, {
  getFillFromSprite: false,
  pointerOrientation: 'horizontal',
  tooltipText: 'center',
  labelText: '[#000000]P&L {valueY}\nChange from spot : ({id}%)\nUnderlying: {valueX}',
  // 配置label的字体大小
  label: {
    fontSize: 12, // 替换成你需要的字号
    // 可选：添加其他文本样式
    // fill: am5.color(0x000000),
    // fontWeight: "bold"
  }
});

tooltip.get('background')?.setAll({
  fill: am5.color(0xffffff),
  stroke: am5.color(0x6771dc),
  strokeWidth: 1,
  fillOpacity: 0.8,
});

方案二：初始化后单独修改Label样式 #

如果需要在Tooltip创建完成后动态调整字号，可通过获取Tooltip的label元素设置：

const tooltip = am5.Tooltip.new(this.root, {
  getFillFromSprite: false,
  pointerOrientation: 'horizontal',
  tooltipText: 'center',
  labelText: '[#000000]P&L {valueY}\nChange from spot : ({id}%)\nUnderlying: {valueX}',
});

// 获取label并设置字号
tooltip.get("label")?.set("fontSize", 12);

tooltip.get('background')?.setAll({
  fill: am5.color(0xffffff),
  stroke: am5.color(0x6771dc),
  strokeWidth: 1,
  fillOpacity: 0.8,
});

为什么之前的方法无效？ #

• 使用tooltipHTML时，需同时开启Tooltip的useHTML配置项，但amCharts v5更推荐使用原生SVG元素（即通过label配置）设置样式，避免HTML与SVG混合的兼容性问题；
• 直接在tooltipText或labelText中无法设置字号，必须通过label元素的样式属性配置。

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