Highcharts 在悬停时有条件地禁用标记

Question

highcharts 新手 - 我有一个图表，我在系列中禁用了标记

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

这非常适合绘制线条，但是，当我将鼠标悬停在图表上时，标记就在那里。这个是很好，但是，如果 xAxis 上的 y 值为 0（空），我不希望标记存在，但我 do当 xAxis 上的 y 值大于 1 时需要它们。

我之前可以通过将 y 值设置为 null，禁用该系列的悬停来做到这一点，但是该系列中存在的空值 - 绘制为堆叠区域样条图导致样条得到绘制不当（在系列中使用 connectNulls: true 选项时没有样条曲线、锯齿状边缘。

那么我and/or 可以我如何根据 x 轴上的 y 值有条件地禁用悬停时的标记？

我一直在研究包装 highcharts 原型，我已经在这样做来控制一些十字准线行为 drawCrosshair()：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts 但我似乎找不到任何可以控制该级别的标记

Answer 1

一个非常静态的方法是简单地用 0 的 Y 值来处理每个点。然后您可以禁用其中每一个的悬停标记。其中一个点看起来像这样 (JSFiddle demo):

{
  y:0, 
  marker:{
    states:{
      hover:{
        enabled:false
      }
    }
  }
}

并在系列中使用：

series: [{
  marker: {
    enabled: false
  },
  data: [3, {y:0, marker:{states:{hover:{enabled:false}}}}, 3, 5, 1, 2, 12]
}]

如您所见，它并不漂亮，但可能会帮助那些需要临时解决方案的人。

Answer 2

对此的一种动态方法是拦截 Point 的 setState 函数。

例如，如果 y 值为 0:

，则包装它并阻止处理

(function (H) {
  H.wrap(H.Point.prototype, 'setState', function (proceed, state, move) {
    if(this.y === 0) return;
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

查看 this JSFiddle demonstration 的实际效果。

Highcharts 在悬停时有条件地禁用标记

Highcharts conditionally disable marker on hover

highcharts

angularjs

highcharts-ng

angular2-highcharts