Как изменить цвета шрифта и понизить метки вертикального выравнивания с помощью шкал в amcharts4? - PullRequest
Новая
       27

Как изменить цвета шрифта и понизить метки вертикального выравнивания с помощью шкал в amcharts4?

4 голосов
/ 16 марта 2019

Я пытаюсь добавить две строки к метке измерительной диаграммы amcharts4 с другим шрифтом для каждой строки:

enter image description here

Даже если ядля 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%>";

![enter image description here

Во-вторых, кажется, что я ограниченнижняя часть графика.Я могу добавить дополнительную метку вне графика («Прогресс»), но мне интересно, могу ли я сделать это как часть метки.Документация не показывает, как установить несколько меток, или как изменить цвет этой метки.

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

Обновление

Поскольку у меня две оси и одна метка, я хочу использовать текст метки для каждой оси, поскольку размер шрифта и цвета для каждой из них отличаются, а не используются метки отдельной диаграммы.

Пытаясь следовать этому примеру, я получаю следующее:

enter image description here

Используя этот код,где <%=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 голосов
/ 16 марта 2019

Вы можете использовать label.textAlign , чтобы установить выравнивание по центру, и label.fill , чтобы установить цвет текста: 

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

Здесь - это кодовое перо, показывающее результат.

В качестве альтернативы вы можете использовать две метки, чтобы также использовать разные цвета и размеры шрифта. Здесь - это другое кодовое перо, показывающее такое поведение.

Для позиционирования вашего ярлыка вы можете использовать следующие свойства:

...