6

当您将鼠标悬停在绘图带上时，我正在尝试找到显示工具提示的最简单方法。事件部分很好，我可以访问鼠标悬停和移出，但我需要找到一种方法以与 Highcharts 的默认外观相同的样式显示工具提示。

这是一个简单的例子。我需要文本“在工具提示中悬停时显示我”显示为工具提示，其样式与基于鼠标坐标的 Highcharts 默认某处相同？

我查看了文档，但找不到任何帮助。

有任何想法吗？

提前致谢。

4

3 回答 3

8

我根据 Gregs 的答案制作了另一个变体，但改用了情节线，因为那是我需要的。我想它也可以很容易地翻译成 plotBands。

此变体也适用于事件，但显示另一个 div 而不是依赖特定的隐藏系列。

该示例可以在JSFiddle中找到。

所以工具提示被添加到与图表相同的容器中

<div id="tooltip" class="thetooltip">
    <p id="tooltiptext" style="margin:0">default</p>
</div>

当用户将鼠标悬停在情节线上时，会触发一个事件，该事件会显示工具提示以及附加的工具提示

var $tooltip = $('#tooltip');
$tooltip.hide();
var $text = $('#tooltiptext');
displayTooltip = function (text, left) {
    $text.text(text);
    $tooltip.show();
    $tooltip.css('left', parseInt(left)+24 + 'px');
};
var timer;
hideTooltip = function (e) {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $tooltip.fadeOut();
    }, 5000);
};

然后每个情节线都定义了一个附加选项、工具提示文本和用于显示上面 div 的事件。

plotLines: [{
    tooltipText: 'hello',
    value: Date.UTC(2011, 2, 28, 0, 1, 1),
    color: '#ff6666',
    dashStyle: 'solid',
    width: 3,
    events: {
        mouseover: function (e) {
            displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]);
        },
        mouseout: hideTooltip
    }
}

tooltipText 不是 highcharts api 的一部分，但在定义时可通过元素上的 options 属性使用。

工具提示的 css 可以定义为类似于 highcharts 的默认 css，只需模仿 css：

.thetooltip {
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}
于 2014-01-22T08:13:16.437 回答
5

这是我在JSFiddle中整理的一个解决方案，尽管它有点小技巧。

将以下行添加到 mouseover 事件：

chart.tooltip.refresh(chart.series[1].points[2]);

这将显示隐藏系列中适当放置的点的工具提示。

然后自定义工具提示格式化程序返回所需的文本。

于 2012-09-17T00:35:31.023 回答
2

另一种解决方案是使用带有“useHTML:true”标志和 CSS 悬停的 plotBands/plotLines 的“label”属性。

xAxis: {
//...code    
   plotLines: [{
      //...code
      dashStyle: 'Dash',
      color: '#000000', 
      width: 2,
      label: {
          text: `<div class="plotline">
                     <div id="custom-tooltip" class="thetooltip">
                         My custom tooltip!
                     </div>
                 </div>`,
          useHTML: true,
      }
   }]
}

修改后的 CSS 将是：

.thetooltip {
    display: none; //the main change
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}

当然在情节线类中：

.plotline {
     &:hover {
       .thetooltip {
          display: block;
        }
     }
}

在我看来，这是一个更健壮的解决方案——首先，它是一个 CSS 解决方案，而不是 JS，从 UX/UI 的角度来看，它比古怪的 JS 更流畅（只需尝试设置正确的超时时间！）

于 2017-08-16T09:41:27.287 回答