高图表 x 范围系列:难以删除 y 轴上的数字标签

Question

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

我目前在使用高图表 X 范围系列图表显示状态数据时遇到问题。具体来说，我的问题是，我们用来表示每个州的数据既相当高又不连续(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 选项可用于显示我们想要的结果。非常感谢。

高图表：9.0.1 高图表-角度：2.10.0 角度：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 论坛上对此给出了很好的答案。他建议使用列范围系列而不是xrange系列来呈现数据。

在这里查看帖子： https://www.highcharts.com/forum/viewtopic.php?f=9&t=47822