javascript - Highcharts 库 UI 故障

Question

我遇到了 highcharts 库的一些极端使用情况。也许有人可以帮助处理这些情况。我的场景是我在数据库中执行不同的查询，并根据该数据绘制图表。数据本质上是高度动态的。同样基于数据，我必须显示某些限制(根据数据计算)。这些限制是使用 Oy 轴上的“plotLines”选项绘制的。这些线必须一直出现，所以为了做到这一点，我手动计算 Oy 轴上的最大值和最小值，以便 highcharts 可以一直显示这些线。基于此，我有两个极端情况:

1) 第一个由这个 fiddle 描述:https://jsfiddle.net/314mgzwn/ . 我的其中一行的文本标签不可见，因为图表中的一行由图表自动显示( fiddle 中名为 USL 的行)。有什么办法可以绕过这个吗？

2) 第二种情况与我在 Ox 轴上可能有大量数据这一事实有关。在这种情况下，如 fiddle 所示:https://jsfiddle.net/ghx6e07r/不显示数据，当我将鼠标移到该区域时，只会出现工具提示。当我手动缩放时，数据开始出现。有什么方法可以让我从一开始就显示数据吗？

Answer 1

1) 覆盖绘图区域的线是网格线。它们的控制方式与刻度相同(网格线延伸刻度)。他们有 z-index属性(绘图线也有 it )。

  propertyObjectY = {
value: 0,
color: '',
dashStyle: 'Solid',
width: 2,
label: {
  text: ''
},
zIndex: 2
}

将 zIndex 设置为 2，因此绘图线将绘制在网格线之上。

示例:https://jsfiddle.net/314mgzwn/3/

2)当你的数据密集时，默认情况下不会渲染标记，因此你需要手动启用它们。

plotOptions: {
      series: {
        marker: {
          enabled: true
        }
      }
    },

示例:https://jsfiddle.net/ghx6e07r/2/

该示例中的第二种情况是空值，除非您设置connectNulls，否则不会通过线连接。属性为真。

示例:https://jsfiddle.net/ghx6e07r/3/