highcharts - xAxis 标签在 Highcharts 中不正确可见

Question

如果我有大量数据，则xAxis标签显示不正确。你可以在这段代码中看到：https ://jsfiddle.net/4nvmuc25/127/

如果我的数据量很少，那么我的xAxis标签可以正确显示。

所以如果我有大量数据，我想正确显示 xAxis 标签。

Restriction: 1:你不能改变xAxis. 2:xAxis标签不应该互相拦截。 3: 你不能用 css 做。

Not restriction：您可以设置tickInterval,step属性，xAxis但请记住数据量是动态的，可以是任何数字。

Answer 1

在这种情况下，您不应使用类别 x 轴类型。在 API 中，我们可以阅读：

步骤：数字

... 默认情况下，当为 0 时，会自动计算步长以避免重叠。为防止这种情况，请将其设置为 1。这通常只发生在类别轴上，并且通常表明您选择了错误的轴类型。

作为一种解决方案，使用带有自定义格式化程序功能的线性轴用于标签：

const labels = [
    "Apr-1",
    "May-2",
    ...
];

Highcharts.chart('container', {
    xAxis: {
        ...,
        labels: {
            ...,
            formatter: function() {
                return labels[this.pos]
            }
    },
    ...
});

---

现场演示： https ://jsfiddle.net/BlackLabel/Lk8aogpq/

API 参考： https ://api.highcharts.com/highcharts/xAxis.labels