4

行ごとに異なるフォントを使用して、amcharts4 ゲージ チャートのラベルに 2 つの行を追加しようとしています。

ここに画像の説明を入力

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%>";

![ここに画像の説明を入力

第二に、私はチャートの一番下に限定されているようです。グラフの外側にラベル (「進行状況」) を追加できますが、ラベルの一部としてこれを行うことができるかどうか疑問に思っています。ドキュメントには、複数のラベルを設定する方法や、このラベルの色を変更する方法が示されていないようです。

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

アップデート

軸が 2 つとラベルが 1 つあるので、単数形のグラフ ラベルを使用するのではなく、軸ごとにフォントのサイズと色が異なるため、各軸にラベル テキストを使用したいと考えています。

この例に従おうとすると、次のようになります。

ここに画像の説明を入力

このコードを使用する<%=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、軸ごとに 1 つのラベルのみを配置する必要があると思います。

アップデート

ラベルに異なるフォントの 2 行が必要なため、これは明らかに私が探しているものではありません。

4

1 に答える 1