为 AmCharts 4 标签添加样式答案

【问题标题】：Add styles to AmCharts 4 labels为 AmCharts 4 标签添加样式
【发布时间】：2018-12-07 15:23:27
【问题描述】：

我在 AmCharts 4 中有一个柱状图，它使用较深的配色方案。条上标签的文本颜色为黑色，在较深的颜色上并未真正显示。

- 我正在使用 AmChart 的 3D 圆柱图表演示中说明的 javascript 代码。

有没有办法将 css 添加到标签/标签文本中？

我想为标签添加一个白色的文本阴影以使其可读。另外，这样，当它在白色图表背景上时，它不会影响文本。

编辑：2018 年 12 月 18 日 - 我正在寻找更接近以下内容的文本：

这些将能够被看到，即使栏很短并且文本位于白色背景下。

【问题讨论】：

我假设它使用 svg 并将其放入转换后的 svg text 元素中。所以可以像svg text { color: red; background-color: white }那样做css

标签： javascript charts amcharts

【解决方案1】：

您可以为标签模板设置填充：

categoryAxis.renderer.labels.template.fill = am4core.color("#fff");

请在此处查看示例：https://codepen.io/team/amcharts/pen/3446cd09288ee4e5901c73b3970adbfe?editors=0010

【讨论】：

这样的问题是文本会在具有短条的列上的白色背景中丢失，这些短条确实为文本提供了背景。
您可以尝试labelTemplate.background.fill = am4core.color("#000"); 或同时使用填充和fillOpacity 值。请检查更新的示例。
这应该可以解决问题。我会看看我是否可以“软化”背景上的边缘并给它一个小半径。感谢您的帮助！
@Eric 你也可以尝试摆弄DropShadowFilter，例如var shadow = labelTemplate.filters.push(new am4core.DropShadowFilter()); shadow.dx = 0; shadow.dy = 0;。有关过滤器的更多信息：amcharts.com/docs/v4/tutorials/using-filters

【解决方案2】：

您可以使用 CSS 为 SVG 文本添加白色笔触。首先为 amCharts 4 启用 CSS 类：

am4core.options.autoSetClassName = true;

然后将其添加到您的 CSS 中：

@supports (paint-order: stroke) {
  .amcharts-LabelBullet text {
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
  }
}

这将为所有 LabelBullet 文本添加一个 4 像素的白色轮廓。

【讨论】：