xAxis 标签在 Highcharts 中不正确可见

Question

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

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

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

Restriction：1：您无法更改 xAxis 的旋转属性。 2:xAxis 标签不应相互拦截。 3:你不能通过 css.

Not restriction: 你可以在xAxis中设置tickInterval, step 属性但记住数据量是动态的，可以是任意数字.

Answer 1

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

step: number

... By default, when 0, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.

作为解决方案，使用线性轴和标签的自定义格式化函数：

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

xAxis 标签在 Highcharts 中不正确可见

xAxis label is not visible properly in Highcharts

highcharts

angular-highcharts