Highcharts 折线图当有多个点具有相同的 X 轴时，所有点都会消失

Question

我正在使用 angular-highcharts 和 angular 7。当我使用 type:"category" for xAxis 时，如下所示：

xAxis: {
  title: {
    text: 'myCustomDates'
  },
  type: 'category',
  categories: ["1398/03/01", "1398/03/02", ...],
}


and data in the series looks like this:
data: [
    { name: "1398/03/02", color: "yellow", y: 2.3 },
    { name: "1398/03/03", color: "red", y: 2.9 },
    { name: "1398/03/04", color: "green", y: 5 },
    { name: "1398/03/04", color: "green", y: 7 },
    { name: "1398/03/15", color: "red", y: 3.5 },
    { name: "1398/03/15", color: "yellow", y: 2.5 },
     ...
   ],

它工作正常，如下图所示：

但是当有多个点具有相同的 xAxis（在我的例子中是波斯日期）时，它可以工作但隐藏所有点，并且当我将鼠标悬停在它上面时仍然显示一个点，但只有一个点来自这些点具有相同的 xAxis。

我想要任意数量的点具有相同的 X 轴，并且所有点都像第一张图片中那样显示。为什么它会隐藏它们，我该如何解决？

Answer 1

您必须将以下内容添加到您的系列中：

查找最近点：'xy'

如果数据有重复 x-values，您必须将其设置为 'xy' 以允许悬停在所有点上。

更多信息： Documentation findNearestPointBy

Answer 2

在 Highcharts API 我们可以读到：

enabledThreshold: number

The threshold for how dense the point markers should be before they are hidden, given that enabled is not defined. The number indicates the horizontal distance between the two closest points in the series, as multiples of the marker.radius. (...)

Defaults to 2.

因此，您可以减小 enabledThreshold 值或将 enabled 属性设置为 true:

plotOptions: {
  series: {
    findNearestPointBy: 'xy' // To make a tooltip works correctly.
  },
},
series: [{
    marker: {
        enabledThreshold: 0,
        // enabled: true
    },
    data: [...]
}]

现场演示： http://jsfiddle.net/BlackLabel/2xguwtfn/

API参考：https://api.highcharts.com/highcharts/series.line.marker.enabledThreshold

Highcharts 折线图当有多个点具有相同的 X 轴时，所有点都会消失

Highcharts line chart all points disappear when have more than one points with same X Axis

highcharts

angular2-highcharts

angular7