如何在 Amcharts5 折线图中删除默认轴并创建新的自定义轴？答案

【问题标题】：How to remove default axis and creating new custom axis in Amcharts5 Line Chart?如何在 Amcharts5 折线图中删除默认轴并创建新的自定义轴？
【发布时间】：2022-12-25 20:52:36
【问题描述】：

我需要创建一个以值轴为 x 轴的线系列图表。因此我需要禁用生成的默认轴并创建我自己的自定义轴，我可以在其中指定间隔距离。

Actual Axis

Expected Axis

我试过保持x轴

    renderer.grid.template.set('visible', false);

并设置条件以仅显示图表数据中存在的范围值。

       xAxis.get('renderer').labels.template.adapters.add('text', (text) => {
            const allowedRange = this.series.values.data.map((x) => x.range.toString());
            if (allowedRange.includes(text)) {
                return text;
            }
        });

这解决了问题，但网格线与轴间隔不匹配。有没有更好的方法来做到这一点。

【问题讨论】：

标签： javascript angular amcharts amcharts5

【解决方案1】：

我不确定您要做什么，但我认为您应该在 xAxis 渲染器上使用 minGridDistance 属性。看看文档：IAxisRendererSettings – amCharts 5 Documentation

这是一个例子：

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererX.new(root, {
      minGridDistance: 30 // Play with it and see what happens...
    })
  }));

  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));

  let series = chart.series.push(am5xy.LineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueXField: "valueX",
    valueYField: "valueY"
  }));
  
  let data = [],
      valueX = 0,
      valueY = 0;

  for (let i = 0; i < 500; i++) {
    data.push({ valueX: i, valueY: i });
  }

  series.data.setAll(data);

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>

【讨论】：