Highcharts 库 UI 故障答案

【问题标题】：Highcharts library UI glitchesHighcharts 库 UI 故障
【发布时间】：2016-11-24 23:44:01
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css highcharts

【解决方案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) 当你的数据被稠密的时候，marker默认是不会渲染的，所以你需要手动开启。

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

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

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

例如：https://jsfiddle.net/ghx6e07r/3/

【讨论】：

【解决方案2】：

尝试为场景 1 更改以下内容：

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

Updated fiddle here

Scenario-2，问题是你也有“空”点。在 highcharts 中，默认情况下不连接空点。连接它们使用

plotOptions: {
    series: {
        connectNulls: true
    }
},

See the fiddle

现在，由于有很多数据点，所以您的图表会显示得很乱。如果您放大图表，它看起来很正常。

【讨论】：