如何更改amcharts4中的标签文字样式

Question

我想更改类别轴标签文本样式，我在 amcharts4 中如何实现？下面是代码，

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 *
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dataviz);

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [
  {
    category: "One",
    value1: 1,
    value2: 5,
    value3: 3,
    value4: 3
  },
  {
    category: "Two",
    value1: 2,
    value2: 5,
    value3: 3,
    value4: 4
  },
  {
    category: "Three",
    value1: 3,
    value2: 5,
    value3: 4,
    value4: 4
  },
  {
    category: "Four",
    value1: 4,
    value2: 5,
    value3: 6,
    value4: 4
  },
  {
    category: "Five",
    value1: 3,
    value2: 5,
    value3: 4,
    value4: 4
  },
  {
    category: "Six",
    value1: 8,
    value2: 7,
    value3: 10,
    value4: 4
  },
  {
    category: "Seven",
    value1: 10,
    value2: 8,
    value3: 6,
    value4: 4
  }
];

chart.colors.step = 2;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
// categoryAxis.renderer.grid.template.location = 0;
// categoryAxis.renderer.line.strokeOpacity = 1;
categoryAxis.renderer.minGridDistance = 30;
 categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 15;
  }
  return dy;
});
categoryAxis.title.text = "Numbers";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());  

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(70);
series1.columns.template.tooltipText = "{name}: {valueY.value}";
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.width = am4core.percent(30);

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 400px;
  height: 250px;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/dataviz.js"></script>
<div id="chartdiv"></div>

这是相同的快照，

我想把文字 'Numbers' 调低一点并加粗，我该怎么做？

Answer 1

对于轴标签（一、二、...）：

var axisLabels = categoryAxis.renderer.labels.template;
axisLabels.fontSize = 17;
axisLabels.fontWeight = "bold";
axisLabels.fontFamily = "Tahoma";
axisLabels.fill = "#ff0000"; // labels color

对于轴标题（数字）：

categoryAxis.title.fontWeight = "bold";
categoryAxis.title.fontSize = 20;
categoryAxis.title.fontFamily = "Helvetica";
categoryAxis.title.fill = "#ff0000";

如何更改amcharts4中的标签文字样式

How to change label text styles in amcharts4

html

javascript

css

amcharts

amcharts4