Highcharts:工具提示显示前的延迟
Highcharts是一款流行的JavaScript图表库，用于在网页上创建交互式和可视化的图表。它提供了丰富的图表类型和配置选项，使开发人员能够轻松地创建各种图表，包括线图、柱状图、饼图等。
在Highcharts中，工具提示（Tooltip）是一个重要的功能，它可以在用户将鼠标悬停在图表上时显示相关数据信息。工具提示显示前的延迟是指在用户将鼠标悬停在图表上一段时间后，工具提示才开始显示的时间延迟。
工具提示显示前的延迟可以通过配置选项进行设置，以满足不同需求。在Highcharts中，可以使用tooltip.delay属性来设置延迟的时间，单位为毫秒。默认情况下，延迟时间为 500 毫秒。
通过设置适当的延迟时间，可以提供更好的用户体验。较短的延迟时间可以使工具提示更快地显示，但可能会导致用户在意外悬停时频繁出现工具提示。较长的延迟时间可以减少误触发，但可能会导致用户等待时间过长。
Highcharts提供了丰富的配置选项和事件回调函数，可以根据具体需求进行定制。例如，可以使用tooltip.formatter属性来自定义工具提示的内容和样式。还可以使用tooltip.positioner属性来自定义工具提示的位置。
对于Highcharts的工具提示显示前的延迟，腾讯云提供了一款与Highcharts兼容的云产品，即云图表（Cloud Charts）。云图表是腾讯云推出的一项数据可视化服务，提供了基于Highcharts的图表组件和丰富的配置选项。通过使用云图表，开发人员可以轻松地在腾讯云上创建和展示各种图表，并灵活地设置工具提示显示前的延迟等交互效果。
更多关于云图表的信息和产品介绍，可以访问腾讯云官方网站的云图表产品页面：https://cloud.tencent.com/product/cts
相关·内容
我试图在HC工具提示中呈现图表，并在火狐和IE10中面临“图像保留”的问题。只有Chrome能正常工作。问题是工具提示图的某些元素(例如标记和图例边框)在工具提示关闭后留在主图表上，。演示程序在这里：
我使用这段代码在工具提示中呈现图表：
tooltip: {
useHTML: true,
formatter: function() {
setTimeout( function() {
$("#hc-tooltip").highcharts({
浏览 1提问于2014-08-06得票数 1
我希望能够使用Chrome DOM检查器中的来定位highcharts工具提示，但我需要能够捕获tolltip的类名才能做到这一点。
当将数据系列中的一个点悬停在Highcharts图表中时，将显示一个工具提示，如下所示：
我正在使用一个共享的工具提示：
tooltip: {
shared: true,
},
但是，使用检查器的“Force element state :hover”不起作用。我甚至看不到工具提示在检查器中以DOM元素的形式出现？
如何在Chrome DOM检查器中检查Highcharts工具提示？
浏览 3提问于2020-04-02得票数 0
2回答
我在highcharts条形图的工具提示中有很多数据。每个工具提示数据有大约50-60行，完整的工具提示无法在图形容器中显示。为了查看所有内容，我想在工具提示中显示一个滚动条。有可能吗？
以下是代码的示例。
以下是工具提示代码。我不知道在哪里添加滚动条形码。
tooltip: {
useHTML: true,
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
浏览 2提问于2016-10-07得票数 1
我正在尝试在移动应用程序中实现highcharts，一切运行正常，但有一个问题是，在将方向从纵向更改为横向时，为选定的任何点显示的工具提示在方向更改时不会隐藏。
请建议我如何在highcharts中以编程方式隐藏工具提示。
我尝试了下面的代码：
$('#tankActualUsagechart').highcharts().tooltip.hide();
但这并不能隐藏我正在显示的标记...
如果有一种方法可以隐藏标记，我也可以..
请在这个问题上帮助我
浏览 38提问于2013-07-12得票数 9
我正在尝试找到当您将鼠标悬停在绘图栏上时显示工具提示的最简单方法。事件部分很好，我可以访问鼠标悬停和移出，但我需要找到一种方法来显示工具提示，在相同的样式作为Highcharts的默认外观和感觉。
这是一个。我需要文本“在工具提示中悬停时显示我”，以显示为工具提示样式相同的Highcharts默认基于鼠标坐标的某处？
我已经看过了，但找不到任何帮助。
有什么想法吗？
提前谢谢。
浏览 4提问于2012-09-17得票数 6
回答已采纳
目前，我正在尝试创建一个带有3个饼图的单一高图表。(所有图表都包含完全相同数量的数据点)。当我悬停在一块饼，我希望3个工具提示出现在所有3个饼图在同一给定点。
我试着用
{
tooltip: { split: true}
}
但是抛出一个JavaScript错误，并且似乎无法在饼图上工作。我似乎不能让它正常工作。我也尝试过重新定义Highcharts.Tooltip.prototype.renderSplit，但也无法让它工作。
我有以下内容：
浏览 2提问于2018-05-31得票数 0
回答已采纳
我是highcharts的新手。默认情况下，Highchart会在图表内部显示工具提示。是否可以在图表外部显示工具提示，并将其显示在与显示inside.Any帮助相同的位置？
浏览 10提问于2013-02-06得票数 1
回答已采纳
2回答
我正在使用highcharts，我想自定义工具提示。我的工具提示应该显示reqName和reqVersion，但当前工具提示显示的是'tipValue‘数组的所有值。
当我将鼠标悬停在列上时，它会向我显示每列上的工具提示(1.1,1.0,1.2,1.2)
where as I would like the tooltip to show version
1.1 for column tpReq
1.0 for column opReq
1.2 for column Rex
1.2 for column tpReq
My xVaue is an array of ['tpR
浏览 0提问于2015-05-20得票数 0
我使用Highcharts，我希望工具提示内容显示如下：local date : value (而不是默认格式categorie name : value)，所以我使用tooltip.formatter如下所示： tooltip: {
formatter() {
return `${Highcharts.dateFormat('%H:%M:%S', +new Date(this.x))}: <b>
${new Intl.NumberFormat().format(this.y)}</b>`
浏览 16提问于2021-04-22得票数 0
回答已采纳
我正试图在高架旗的工具提示中添加锚标记。
我在这方面面临着几个问题：
工具提示中没有显示锚标记。
当我试图在工具提示上悬停时，工具提示就消失了。
我的代码看起来是：
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function (data) {
var year = new Date(data[data.length - 1][0]).getFullYea
浏览 1提问于2018-12-05得票数 0
我正在使用股票图表来显示趋势数据。在后端，我得到了valueSuffix应该是什么(或valuePrefix，视情况而定)。我还在格式化工具提示中的日期显示。以下是该系列声明的重要部分：
...
name: 'Wages',
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
以下是工具提示格式化程序：
...
tooltip: {
formatter:
浏览 2提问于2013-09-10得票数 2
1回答
我有很多图表互相接近，但是工具提示在另一个图表的div上时被剪掉了。
下面是示例
我使用CSS显示工具提示已完成，但不起作用。
.highcharts-tooltip span {
background-color:yellow;
border:0px;
z-index:9999 !important;
overflow: visible;
}
.highcharts-container
{
overflow: visible !important;
}
有什么帮助吗？请
浏览 3提问于2013-10-18得票数 0
回答已采纳
1回答
我已经创建了混合应用程序，默认设置是当我们在图表中悬停时显示的工具提示。但是，并不是在移动设备上悬停。如何在混合应用程序图表中显示工具提示?？
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
c
浏览 3提问于2015-06-11得票数 0
我正在从Highstock切换到highcharts，但遇到了一些错误。
我的观点是{x:11，y:22，tt:'xx'}，tt是我自己定义的，我想在工具提示的标题中显示出来。但是标题不会显示在Highcharts中。
我的例子是，HighStock可以，但是Highcharts无法显示标题。
$(function() {
var chart = new Highcharts.StockChart({
//var chart = new Highcharts.Chart({
chart: {
renderTo: 'container&
浏览 13提问于2017-07-14得票数 0
回答已采纳
我使用highcharts 2.3.3，并使用以下代码来描述图表的工具提示。
tooltip: {
formatter: function() {
return '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br/>'+ this.y;
}
},
工具提示在firefox中没有问题，但在chrome中，文本会显示在工具提示框之外。我在系列名称上也遇到了这个问题。名字是开箱即用的。有什么问题吗？
浏览 2提问于2012-11-10得票数 2
回答已采纳
我的应用程序中有HighCharts的条形图。highcharts提供的工具提示运行良好。但我想在工具提示中添加更多数据。
请考虑下图。包含当前图形的。
在工具提示中，它显示新票证计数和已完成计数。但我想通过将它们分组为其他值来显示它们。
例如，我有不同的Zones。现在，我想根据区域对计数进行分组。请考虑下面的附件。
这里的区域计数和区域也是动态值。如果数据可用，将获得区域计数，否则将根本得不到区域。
是否可以获得所需格式的工具提示？
浏览 1提问于2020-09-30得票数 0
Highcharts工具提示显示在负值的列栏底部，但我希望它显示在顶部或0轴级别。请帮帮忙。 根据高亮图表显示工具提示位置： ? 我希望如何定位的参考图像： ?
浏览 33提问于2021-11-06得票数 0
回答已采纳
有时很难让Highcharts Javascript图表库为某些数据点显示工具提示。例如，尝试在以下链接上显示位于50,50处的数据点的工具提示。很难让它显示出来，而且它会闪烁很多。有没有人知道一些解决办法？
我用最新的Chrome和Firefox试用了一下。
浏览 3提问于2013-03-06得票数 0
我使用HighCharts和JQuery (ASP.Net，C#，MVC)在我的网页上显示图表。我使用下面的代码在页面加载时最初显示工具提示。还可以在鼠标移出图表区域时保留工具提示和十字光标。感谢@jugal-thakkar的回答
chart = new Highcharts.Chart({
... <my chart options go here>
...
});
...
chart.tooltip.refresh([chart.series[0].points[1]]);
chart.tooltip.hide = function () { };
chart.tooltip
浏览 4提问于2012-09-12得票数 0
回答已采纳
我可以在这里发布一些代码，但问题的标题正是问题所在。
我的chart.destroy()需要很长时间才能拿到75000分。每个点也有一个工具提示(使用的工具提示是Highcharts自己的工具提示)
此外，使用new Highcharts.Chart({ ...options...})绘制新图表也需要花费大量时间。
有没有人用Highcharts处理过这么多数据点？如果是，您是如何使其顺利运行的？4-5秒的延迟是可以的，但是我在渲染图表时得到了30秒的延迟。时间轴中的GC事件也显示了大量数据被垃圾收集。我感觉我没有一个解决方案，但我正在拼命寻找任何线索。
谢谢!
浏览 0提问于2014-09-04得票数 0
我的对齐问题用解决了
但是工具提示信息用索引而不是x轴标签显示。
如果没有调用Highcharts.Axis.prototype.init，下面的输出是什么？
http://jsfiddle.net/mkpasala/3s0prgau/
当我像下面这样调用Highcharts.Axis.prototype.init方法时，而不是xAxis标记它的显示索引。
http://jsfiddle.net/mkpasala/k94cfn8t/
请帮助我修复Highcharts.Axis.prototype.init方法中的这个问题。
浏览 0提问于2018-12-04得票数 0
我正在使用HighCharts，我想使用工具提示中的十字光标来帮助用户悬停特定的点。当该点悬停时，我希望在另一个div中显示该点的信息(即已完成)，但我希望阻止工具提示框出现。下面是“工作”代码：。如你所见，我做了一个显示:在工具提示中没有，但有一个“圆圈”仍然在那里。
感谢任何帮助:)
浏览 1提问于2011-04-10得票数 2
回答已采纳
是否有一个highcharts工具提示的设置，您可以将其设置为在单击时显示，而不是悬停？
我见过很多人讨论工具提示停留在点击，但仍然有悬停存在。有没有一种方法可以禁用悬停而只使用单击？
浏览 3提问于2013-06-06得票数 2
回答已采纳
1回答
我正在使用HighCharts，并且我想从图表中删除工具提示。
我通过以下代码做到了这一点：
tooltip: {
enabled: true,
}
我的需求是在工具提示中显示我想要在图表顶部显示的任何内容。当我们将鼠标悬停在任何点上时，该显示区域将按照工具提示的方式使用适当的数据进行更新。
浏览 1提问于2011-12-27得票数 1
回答已采纳
1回答
在我的网站上，我想显示平均评分，回归线和评论的数量张贴在HighCharts。
在HighCharts上，我只想在工具提示中画出平均评分，回归line.But，我想显示贴出的评论数量和平均评分，回归线。
关于更多的想法，我附上了screenshots.Please帮助我做到这一点。
浏览 3提问于2015-07-29得票数 0
回答已采纳
7回答
我的图表上的标签显示在工具提示上，这看起来不是很好。我试着玩zIndex，但是没有结果。如何使工具提示不透明？这是我的jsFiddle：
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graf1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShado
浏览 3提问于2013-02-28得票数 18
回答已采纳
在Highcharts图上，当鼠标悬停在列(点)上时，我们是否可以显示工具提示？
谢谢Chanan
浏览 1提问于2013-03-10得票数 0
在工具提示从悬停状态到非悬停状态时，在显示工具提示之前显示一两秒钟，似乎没有任何选项或实现。所以当你的鼠标悬停在工具提示上的时候，很好，它会显示，但是当你把鼠标从这个点移开的时候，我想让鼠标多显示2秒，而不是像现在那样立即消失。
我至今所做的一切
我查看了文档和可用的工具提示选项。它有一个可用的customTooltip函数，但是当您想要实现一个完全自定义的工具提示时，这是可用的。
在chart.js线图的代码库中，它将事件附加在一起，但似乎无法弄清楚如何添加延迟。
看到了'mouseout'，'mouseover‘事件数组列表的字符串，但似乎找不出如何使用
浏览 12提问于2015-07-28得票数 1
回答已采纳
当使用»系列«元素内部的工具提示时，它会显示一种项目符号(并最终显示系列名称)，这是我不希望看到的： ? 有没有办法抑制这一点呢？什么都找不到。在使用未包含在series元素中的tooltip元素时，似乎不会发生这种情况。但是，我无法成功地访问JSON国家名称标记。 在这里，is a fiddle。 Highcharts.mapChart('container', {
series: [{
mapData: Highcharts.maps['customMap'],
joinBy: 'ISO3CD',
ke
浏览 19提问于2020-07-22得票数 0
回答已采纳
3回答
如何将工具提示添加到highcharts中的x轴标签？
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
return categoryImgs[this.value];
}
}
}
目前，工具提示仅显示在图表中的点上，我希望用户在x轴上的标签上悬停时也
浏览 1提问于2014-02-19得票数 4
回答已采纳
我是个使用highcharts的新手。
我有datepicker from和to，并从json文件中获取数据。
该图表每周显示一次。
我的x轴是周，所以我的工具提示显示周数。
我还想在图表的工具提示中显示日期，比如假设，在第一周，日期范围是31-03-2013到06-04-2013，当点在第一周时，我需要在工具提示中显示此日期，而不更改x轴。
有没有人能帮上忙。
这是我的代码，
$(function () {
$('#container').highcharts({
title: {
text: typ
浏览 4提问于2014-06-06得票数 0
我尝试在渲染图像上添加一个工具提示。我试着在渲染图像上添加工具提示，但它显示“工具提示不是一个函数”。
chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png').add().tooltip({
formatter: function () {
return 'Test';
}
})
浏览 0提问于2019-08-14得票数 0
我正在尝试创建一个仪表板页面，如果用户单击图中的一个点，那么在某个点上具有唯一标识符的所有图形都应该能够显示工具提示。这适用于除火花线以外的所有图表。下面的现场演示展示了默认的高海图火花线演示，但我的演示只有一个点(有一个点的条形图)。错误仍然是相同的：
未定义的TypeError:无法读取未定义的属性tooltipOptions (highcharts.src.js:22676)
我用来显示/隐藏工具提示的代码是：
function chartPointClick(pointidx) {
var chartArray = Highcharts.charts;
for
浏览 0提问于2019-02-05得票数 0
回答已采纳
我已经用highcharts制作了一个两级树状图。Level 1显示了默认的工具提示，它是根据我的要求提供的。我不希望在级别2上有任何工具提示。请帮助。
浏览 2提问于2016-10-13得票数 0
1回答
我使用的是带有希伯来语名字的Highcharts。当我具有负值时，工具提示会在右侧显示减号(-)。
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges
浏览 0提问于2016-11-30得票数 0
我试图在多个图表中同步共享工具提示，每个图表都有多个系列。
问题是在下面的例子中，工具提示总是显示3系列，即使在特定的时刻只有两个系列出现。
1)如何确保只有当某个系列实际存在时，才能在工具提示中显示它？
2)当我们移出图表时，如何确保工具提示是关闭的？
JSFiddle：
小提琴同步代码：
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i
浏览 1提问于2018-05-25得票数 1
回答已采纳
我和Highmap一起工作，被困在地图上的工具提示上，上面的位置是lat-lon。
一切都是正确的，但是工具提示是指向离鼠标光标最近的点。这将导致显示工具提示即使在Map的白色容器区域也是启用的。
当地图上有多个lat点时，这就引发了问题。
我试着用鼠标结束和鼠标出点事件，但是结果是一样的，从鼠标中检测到点很远。
这个问题在Highmaps演示中也是可见的。
[<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script
浏览 2提问于2018-03-14得票数 1
回答已采纳
我正在开发一个有2条样条线和2个散点的图表。我使用默认的工具提示格式化程序显示基于样条曲线数据的工具提示。但是，当我隐藏默认工具提示而悬停散布时，在显示散布提示之前，它似乎再次触发。
如何防止触发默认工具提示？
ps: im使用Highcharts 3.0.1
编辑:我试过"chartObj.tooltip.enabled = false“，但它不起作用。
浏览 1提问于2013-04-11得票数 0
回答已采纳
1回答
我想使用HighCharts构建一个饼图，它显示两个值。一个是百分比细分所基于的值-称为单位。另一个值是成本值。我想用标准的饼图，而不是甜甜圈。
当点击工具提示时，我希望按照正常情况显示名称值对，例如，五月，15个单位，然后还显示一个$值。例如：
五月: 15个$63
highcharts中的饼图中有没有可以拉入第二个数据集的。
圆环图提供了更多的灵活性，但在这种情况下，要求图表仅显示单位，而工具提示显示额外的详细信息。
浏览 1提问于2014-01-17得票数 0
是否可以在两种不同类型的图表中链接/同步两种图表数据，以便一次显示工具提示？
举个例子，我有一个饼图和一个面积图。
饼图表示特定浏览器的百分比，面积图显示每个浏览器每年的下载量。
我需要做的是，如果有人点击或悬停在饼图的部分，相关的线条和面积图的工具提示应该突出显示……
因此，当有人在饼上点击/悬停firefox时，应该会显示与该区域相关的线条，反之亦然。
使用highcharts可以做到这一点吗？
到目前为止，我所做的工作是
我注意到的一件事是，我在我的面积图中添加了event，以便在工具提示悬停时显示颜色。
events: {
tooltipRefresh:
浏览 12提问于2016-09-26得票数 0
回答已采纳
我需要用highcharts绘制多边形。问题是我只需要一个工具提示和整个多边形的鼠标悬停效果。要了解我想要实现的目标，请查看此。
Highcharts.chart('container', {
chart: {
type: 'column',
zoomType: 'x'
},
xAxis: [{
categories: [
'Jan 17',
浏览 0提问于2017-12-23得票数 1
使用Highstock ("StockChart")，柱状图中每个条形图的工具提示将显示是否将“十字准线”悬停在实际条形图的上方。请参阅此示例：
$('#container').highcharts('StockChart', {
chart: {
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: '
浏览 3提问于2015-07-08得票数 1
我正在处理高图表。我的要求是在用户悬停在特定点时显示数据，但是高位图表的默认行为是不同的。如代码片段所示，当我从一个点悬停到另一个点时，工具提示的值会在中途发生变化。我希望当光标到达这一点时，它应该改变值，而不是在两个点的中间。
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type:
浏览 6提问于2018-09-10得票数 0
1回答
我想删除工具提示中的一个选项，我不知道我是否可能有一个函数来设置所有图表的参数。我想我应该把它放在这里：
Highcharts.setOptions({
lang: {
numericSymbols: null
},
tooltip: {
valueDecimals: 2
}
}
});
我想删除工具提示中显示为0的部分。
谢谢
浏览 0提问于2018-11-29得票数 1
回答已采纳
我正在尝试编写e2e测试用例，使用protractor for charts在我们的应用程序中使用highcharts-angular构建的图表。我正在查询图表中绘制的系列，以及鼠标悬停时系列中某个点的工具提示值。它们的定位器如下所示 getPlottedSeriesNames() {
return element.all(by.css('.highcharts-legend-item>text>tspan')).getText();
}
hoverOverASeries() {
return browser.actions().mouseMo
浏览 10提问于2019-09-23得票数 0
回答已采纳
我有一张图表
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">&l
浏览 1提问于2015-06-02得票数 1
回答已采纳
1回答
我正在使用实心规范高图表插件，它是完美的，但当我想显示工具提示，并将其设置为真，它看起来不太好。我只想在量规中显示这个值，而不是别的，这是代码：
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
浏览 1提问于2014-07-08得票数 0
回答已采纳
请通过链接，当我鼠标进入图表，它应该显示工具提示与图表标题(图表名称)。
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
c
浏览 2提问于2015-12-04得票数 0
我正在尝试使用Highcharts显示自定义工具提示。你可以在这里找到一个代码的例子：
当您将鼠标悬停在图表上时，您可以看到工具提示仅包含来自系列2的值，而不包含来自系列1(不可见)的值。单击图例中的"Series 1“时，可以在工具提示中看到Series 1中的值。
编辑:没有要提交的code，只需修复链接/遵守编辑规则...
有没有办法在工具提示中显示不可见序列中的值？
浏览 0提问于2011-09-26得票数 13
回答已采纳
2回答
我有一个简单的列图表，有三个系列：
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart'
},
xAxis: {
categories: ['']
},
series: [{
na
浏览 5提问于2015-10-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
