Highcharts x-range 系列：难以删除 y 轴上的数字标签

Question

这是一个给任何有 HighchartsJS 经验的人的问题

我目前在使用 Highcharts X-range 系列图表显示状态数据时遇到问题。具体来说，我的问题是我们用来表示每个单独状态的数据都相当高且不连续（768、769 和 773）。为了标记这些单独的状态，我使用了一个稀疏数组并将我的标签放在相应的索引处。

这个 jsfiddle 描述了我试图解决的问题：https://jsfiddle.net/sn4d2hvq/10/

let categoryArray = [];
categoryArray[768] = 'one';
categoryArray[769] = 'two';
categoryArray[773] = 'three';


Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Example'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: categoryArray,
    },
    series: [{
        name: 'dataset 1',
        borderColor: 'gray',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 768,
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 769
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 773
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 769
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 773
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

是我想排除 y 轴上的所有值（在本例中表示所有数值），这样在第一个索引之前没有从零开始的数字，也没有任何数字之间的数字标签（即 770、771,772）。这是所需视图的示例： https://jsfiddle.net/estgbr6j/2/

let categoryArray = ['one', 'two', 'three'];


Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Example'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: categoryArray,
    },
    plotOptions: {
      xrange: {
        colorByPoint: false,
      }
    },
    series: [{
        name: 'dataset 1',
        borderColor: 'gray',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]

});

我能够始终如一地实现预期结果（如第二个示例所示）的唯一方法是映射 [768, 769, 773] => [0, 1, 2] 中的值并使用密集数组来标记新映射的值。似乎不需要这种解决方法，但我还没有在 highcharts API 中找到一个选项来轻松实现我们想要的结果而无需映射值。还应该注意的是，在我们的实际数据集中，我们通常显示多个系列，每个系列用自己的颜色描绘，而不是每个类别（我已经能够实现）。我想知道哪个 API 选项或选项可用于显示我们想要的结果。非常感谢。

highcharts: 9.0.1 高图-angular：2.10.0 angular：12.0.5 节点：14.18.0

Answer 1

映射数据的解决方案非常好。如果你想有平均分布的点，间隔必须是规则的。

data: [{
    x: Date.UTC(2014, 10, 21),
    x2: Date.UTC(2014, 11, 2),
    y: 0,
}, {
    x: Date.UTC(2014, 11, 2),
    x2: Date.UTC(2014, 11, 5),
    y: 1
}, {
    x: Date.UTC(2014, 11, 8),
    x2: Date.UTC(2014, 11, 9),
    y: 2
}, {
    x: Date.UTC(2014, 11, 9),
    x2: Date.UTC(2014, 11, 19),
    y: 1
}, {
    x: Date.UTC(2014, 11, 10),
    x2: Date.UTC(2014, 11, 23),
    y: 2
}]

您可以使用tickPositions 属性，但标签不会平均分配。示例：https://jsfiddle.net/BlackLabel/gbwhk5nx/

API参考：https://api.highcharts.com/highcharts/yAxis.tickPositions

Answer 2

mateusz.b 官方 Highcharts 论坛对此有很好的回答。他建议使用 columnrange 系列而不是 xrange 系列来呈现数据。

在此处查看 post： https://www.highcharts.com/forum/viewtopic.php?f=9&t=47822

Highcharts x-range 系列：难以删除 y 轴上的数字标签

Highcharts x-range series: difficulty removing numerical labels on y-axis

javascript

highcharts