AmCharts 5 - 调整 xAxis - 数字到年份

Question

我在 AmCharts 5 中生成了一个图表，我需要帮助转换图表的 x 轴。这样X轴将由年份组成（今天它生成为2.014,2.015,2.016，我无法调整它，我不想用逗号，我希望它是年份）。 （我来自巴西，请原谅我生疏的英语）

目前生成如下：

我希望它看起来像这样：

这是我今天的代码：

HTML

<div id="chartdiv2"></div> 

CSS

#chartdiv2  {
  width: 100%;
  height: 300px;
}

图表.js

am5.ready(function() {

  // Create root element
  var root2 = am5.Root.new("chartdiv2");

  // Set themes
  root2.setThemes([
    am5themes_Animated.new(root2)
  ]);

  // Create chart
  var chart2 = root2.container.children.push(am5xy.XYChart.new(root2, {
    panX: false,
    panY: false,
    wheelX: "panX",
    wheelY: "zoomX",
    layout: root2.verticalLayout
  }));

  var data2 = [{
    "year": "2016",
    "category": "111",
    "value": "20mi",
  }, {
    "year": "2015",
    "category": "222",
    "value": "50mi",
  }, {
    "year": "2016",
    "category": "333",
    "value": "30mi",
  }, {
    "year": "2017",
    "category": "444",
    "value": "40mi",
  }, {
    "year": "2018",
    "category": "555",
    "value": "80mi",
  }];

  // Create axes
  var yRenderer2 = am5xy.AxisRendererY.new(root2, {
    cellStartLocation: 0.2,
    cellEndLocation: 0.8,
  });

  yRenderer2.grid.template.set("location", 1);

  var yAxis2 = chart2.yAxes.push(
    am5xy.CategoryAxis.new(root2, {
      categoryField: "category",
      renderer: yRenderer2,
      tooltip: am5.Tooltip.new(root2, {})
    })
  );

  yAxis2.data.setAll(data2);

  var xAxis2 = chart2.xAxes.push(
    am5xy.ValueAxis.new(root2, {
      min: 2014,
      max: 2023,
      renderer: am5xy.AxisRendererX.new(root2, { strokeOpacity: 0.1 }),
    })
  );

  // Add series
  var series2 = chart2.series.push(am5xy.ColumnSeries.new(root2, {
    name: "rent-acum",
    xAxis: xAxis2,
    yAxis: yAxis2,
    valueXField: "year",
    categoryYField: "category",
    sequencedInterpolation: true,
    tooltip: am5.Tooltip.new(root2, {
      pointerOrientation: "horizontal",
      labelText: "[bold]{valueX}: [/]{dataItem.dataContext.value}"
    })
  }));

  series2.columns.template.setAll({
    height: am5.percent(70)
  });

  series2.columns.template.set("fillGradient", am5.LinearGradient.new(root2, {
    stops: [{
      color: am5.color(0x4396d3),
    }, {
      color: am5.color(0x3472a7),
    }]
  }));

  series2.columns.template.setAll({
    strokeOpacity: 0
  });

  // Add cursor
  var cursor2 = chart2.set("cursor", am5xy.XYCursor.new(root2, {
    behavior: "zoomY"
  }));
  cursor2.lineX.set("visible", false);

  yAxis2.get("renderer").labels.template.set("fontSize", 14);
  yAxis2.get("renderer").labels.template.set("fill", am5.color("#102E67"));
  yAxis2.get("renderer").labels.template.set("fontWeight", 500);
  xAxis2.get("renderer").labels.template.set("fill", am5.color("#102E67"));
  xAxis2.get("renderer").labels.template.set("fontWeight", 500);

  xAxis2.get("renderer").grid.template.set("forceHidden", true);
  yAxis2.get("renderer").grid.template.set("forceHidden", true);

  function formatXAxisLabel(value) {
  return new Date(value).getFullYear().toString();
}

  series2.data.setAll(data2);

  // Make stuff animate on load
  series2.appear();
  chart2.appear(1000, 100);

}); // end am5.ready()

我想要解决方案，因为我在更改 Amcharts 5 中的标题时遇到很多困难，我总是自杀，而且我无法取得太大进展

Answer 1

这个问题你解决了吗？我也有同样的问题。