具有共享和拆分tooptip的Highcharts，是否有可能设置悬停xAxis标签的样式？

Question

期望： 在xAxis标签上设置我的自定义样式，并在鼠标悬停时取消“默认”样式（见下面的小提琴）。

fiddle

试过：

tooltip: {
  useHTML: true
}


.test {
  background-color: red;
}

是的，我现在可以设置样式，但是'默认'样式无法取消，默认样式'保持'一旦mouseover发生，尤其是在狭窄的屏幕上。

BTW，我这样做是为了保持工具提示覆盖Highcharts.hide函数（感谢StackOverflow）：

    (function (H) {
        H.wrap(H.Tooltip.prototype, 'hide', function () {
        });
    }(Highcharts));

为了清楚地显示这个问题，我发布了一些图片：

Answer 1

您可以包装Highcharts.Tooltip.prototype.renderSplit(labels, points)方法，最后覆盖工具提示属性。

Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function(p, labels, points) {
  p.call(this, labels, points);

  var tt = this.tt;

  if (tt) {
    // overwriting tooltip box attrs
    tt.attr({
      padding: 20,
      fill: 'red',
      stroke: 'blue',
      'stroke-width': 3,
      r: 4
    });

    // changing the position of the text inside the box
    tt.text.attr({
      y: 50
    })
  }
});

要更改文字样式，您可以使用tooltip.headerFormat属性。

tooltip: {
  split: true,
  headerFormat: '<span style="font-size: 30px; color: white">{point.key}</span>'
},

示例：http://jsfiddle.net/n903143x/