Question

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

这是一个quick example。我需要文本“在工具提示中悬停显示”以显示为基于鼠标坐标的Highcharts默认设置的工具提示？

我看过docs并找不到任何帮助。

有什么想法吗？

提前致谢。

Answer 1

我根据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);
};

然后每个情节线都有一个额外的选项，tooltipText和用于显示上面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可以通过模拟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;
}

Answer 2

这是我在JSFiddle中汇总的一个解决方案，虽然这有点像黑客。

将以下行添加到mouseover事件：

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

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

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

Answer 3

另一个解决方案是使用＆＃34;标签＆＃34; plotBands / plotLines的属性为＆＃34; useHTML：true＆＃34;旗帜和CSS悬停。

enum Role:String {
    static let Employee = "employee"
    static let Manager = managerName
    case employee, manager = managerName //error: Raw value for enum case must be literal
}

修改后的CSS将是：

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,
      }
   }]
}

当然在情节线课上：

.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;
}

在我看来，它是一个更强大的解决方案 - 首先，它是一个CSS解决方案，而不是JS，从UX / UI的角度来看，比古怪的JS工作更顺畅（只是尝试设置超时！）

Highcharts + Plotband工具提示悬停+默认样式

3 个答案: