如何使用 amcharts4 中的仪表图更改字体颜色和降低垂直对齐标签？

Question

我正在尝试向 amcharts4 仪表图表的标签添加两行，每行使用不同的字体：

即使我将 horizontalCenter 设置为 middle，字体仍然是左对齐的。

        // label
        var label = <%=strKey%>.radarContainer.createChild(am4core.Label);
        label.isMeasured = false;
        label.fontSize = 22;
        label.x = am4core.percent('<%=ThisChart.Average%>');      // label inside
        label.y = am4core.percent(100);
        label.fontFamily = "Arial";
        label.fontColr = "#ff0000";
        label.fontWeight = "900";  // "normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"
        label.horizontalCenter = "middle";
        label.verticalCenter = "bottom";
        label.text = "<%=FormatNumber(ThisChart.Average,,0)%>%\n<%=ThisChart.ChartTitle%>";

其次，看来我仅限于图表底部。我可以在图表之外添加一个额外的标签 ("Progress")，但想知道我是否可以将此作为标签的一部分。该文档似乎没有显示如何设置多个标签，也没有显示如何更改此标签的颜色。

===================

更新

因为我有两个轴和一个标签，所以我想为每个轴使用标签文本，因为每个轴的字体大小和颜色都不同，而不是使用单一的图表标签。

在尝试遵循 this 示例时，我得到了这个：

使用此代码，其中 <%=strKey%> 是动态对象名称：

        // axis settings
        var axis0 = <%=strKey%>.xAxes.push(new am4charts.ValueAxis());
        axis0.min = 0;
        axis0.max = 100;  // average
        axis0.strictMinMax = true;
        axis0.renderer.labels.template.disabled = false;  // false forouter label ticks
        axis0.renderer.ticks.template.disabled = false;
        axis0.renderer.grid.template.location = 0;
        axis0.renderer.minGridDistance = 20;
        //axis0.renderer.labels.template.fill = am4core.color("#f00");
        //axis0.renderer.grid.template.disabled = true;

        var labelTemplate = axis0.renderer.labels.template;
        labelTemplate.rotation = 0;
        labelTemplate.horizontalCenter = "middle";
        labelTemplate.verticalCenter = "bottom";
        labelTemplate.dy = 10; // moves it a bit down;
        labelTemplate.inside = false; // this is done to avoid settings which are not suitable when label is rotated
        labelTemplate.fill = am4core.color("#f00");
        labelTemplate.background.fill = am4core.color("#ccc");

我想我可能需要为此参考 radarContainer，并且只希望每个轴定位一个标签。

更新

这显然不是我想要的，因为我需要两行不同字体的标签。

Answer 1

您可以使用label.textAlign to set the alignment to center and label.fill设置文字颜色：

label.textAlign = "middle";
label.fill = am4core.color('red');

Here是显示结果的代码笔

或者，您可以使用两个标签来同时使用不同的颜色和字体大小。 Here 是另一个显示该行为的代码笔。

要定位标签，您可以使用以下属性：

如何使用 amcharts4 中的仪表图更改字体颜色和降低垂直对齐标签？

How to change font colors and lower vertical align labels with gauge charts in amcharts4?

javascript

amcharts

amcharts4

更新