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

Question

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

实际轴

预期轴

我试过保持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;
            }
        });

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

Answer 1

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

这是一个例子：

 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>