Highcharts使用格式化程序更改工具提示日期时间
Highcharts是一款基于JavaScript的图表库，可以用于在网页上创建各种类型的交互式图表。它支持格式化程序来自定义工具提示（tooltip）中的日期时间显示。
格式化程序是一种函数，用于将日期时间数据转换为特定的格式。在Highcharts中，可以使用tooltip的formatter属性来指定格式化程序。以下是一个示例代码：
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + this.y;
}
}在上述代码中，使用了Highcharts.dateFormat函数来将日期时间数据格式化为"%Y-%m-%d %H:%M:%S"的形式。this.x表示x轴的值，this.y表示y轴的值。通过在返回值中添加HTML标签，可以实现换行显示。
Highcharts提供了一些常用的日期时间格式化选项，如"%Y-%m-%d"表示年-月-日，"%H:%M:%S"表示时:分:秒等。可以根据具体需求选择合适的格式化选项。
Highcharts是一款非常强大且灵活的图表库，适用于各种数据可视化场景。腾讯云也提供了一系列与Highcharts兼容的产品，如云服务器、云数据库、云存储等，可以帮助开发者快速搭建和部署Highcharts图表应用。具体产品介绍和使用方法可以参考腾讯云官方文档：腾讯云产品介绍。
相关·内容
我正在使用股票图表来显示趋势数据。在后端，我得到了valueSuffix应该是什么(或valuePrefix，视情况而定)。我还在格式化工具提示中的日期显示。以下是该系列声明的重要部分：
...
name: 'Wages',
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
以下是工具提示格式化程序：
...
tooltip: {
formatter:
浏览 2提问于2013-09-10得票数 2
我的图表每秒更新一次，我想在工具提示中显示时间戳(例如，2016年4月7日，15:12:38)，并在x轴上显示日期。它应该看起来像这个：。我不知道如何自定义我的图表。我附上一段代码：
$('#container').highcharts({
chart:{
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
浏览 2提问于2016-05-30得票数 0
1回答
我想要创建一个带有BubbleChart的HighChart，带有X轴上的日期，还有一个自定义工具提示。
这是我的密码：
public ActionResult BubbleChart(int id)
{
Project p = db.Projects.Find(id);
Series Serie1 = new Series();
List<object> obj1= new List<object>();
foreach (Info info in p.Infos)
浏览 0提问于2015-10-08得票数 0
回答已采纳
我试图为通过/失败的测试用例的编号绘制样条图，并根据hour/date/month/year对它们进行分组，如果它的时间、数据不能全部24小时可用，我将得到这个值为不规则序列(即)。其他集团也是如此。由于数据不规则，需要x轴的勾选间隔为月副，尝试过使用dateTimeLabelFormats，它对我没有多大帮助，因为它只是格式化标签。
我所需要的是tickInterval需要在工具提示中的月份副和日期和时间。
遗憾的是，我无法在BI工具( HighCharts )(SpagoBI)中发布数据/篡改，因为它需要模板。
提前谢谢。
浏览 7提问于2013-12-27得票数 2
我是highcharts的新手，我想根据我从数据库中获得的数据来显示日期。我想在工具提示中或在类别下显示日期。现在categories正在显示天数的名称。如果可能的话，我想在分类中显示当天的日期。 <script>
Highcharts.chart('column', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
浏览 16提问于2019-12-24得票数 0
2回答
我用3个数据点设置了我的列图。每个x值都是一个日期时间值--一天内不同的时间。
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2013, 5,
浏览 4提问于2013-10-16得票数 0
回答已采纳
我尝试在渲染图像上添加一个工具提示。我试着在渲染图像上添加工具提示，但它显示“工具提示不是一个函数”。
chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png').add().tooltip({
formatter: function () {
return 'Test';
}
})
浏览 0提问于2019-08-14得票数 0
1回答
我的图表显示如下
如何仅更改工具提示中的日期格式，以便将年份包括在其中？
我知道可以添加到tooltip属性中的formatter，但是当前的默认工具提示很好，只需要显示年份。
这是一个日期时间的情节。在其中，我传递了UNIX日期时间和值集对象的数组。
浏览 4提问于2015-06-30得票数 0
回答已采纳
我正在使用Highchart制作柱状图。我的图表运行得很好。我只想删除工具提示中显示的项目符号。从图像中，您可以看到项目符号出现在金额之前。我怎样才能删除这个？如果任何人有任何想法，请与我分享。
我的代码如下：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div
浏览 3提问于2016-11-22得票数 1
我使用高级图表(StockChart)来绘制事件的时间轴(因此X轴代表一个日期时间)，我的JS知识非常基本。每个事件(表示为栏/列)都附带了一些数据，我在工具提示中显示了这些数据。我的时间线有多种类型的事件(=系列)，并且可能发生两个或多个不同类型的事件同时发生。换句话说，图系列中的两个点共享相同的X轴值。
，我的问题是，在这些情况下，我最终得到了一个时间线，其中有2列，但只有1条工具提示包含2条数据的合并。
下面是现在的样子：
1.7xxxx表示第一个列值
3.xxx表示第二列值。
还需要注意：“扣”点大致位于2列的中间(细长的白色垂直栏)，而不是列本身，这在UX的立场上有点
浏览 7提问于2022-01-07得票数 1
回答已采纳
我正在尝试在移动应用程序中实现highcharts，一切运行正常，但有一个问题是，在将方向从纵向更改为横向时，为选定的任何点显示的工具提示在方向更改时不会隐藏。
请建议我如何在highcharts中以编程方式隐藏工具提示。
我尝试了下面的代码：
$('#tankActualUsagechart').highcharts().tooltip.hide();
但这并不能隐藏我正在显示的标记...
如果有一种方法可以隐藏标记，我也可以..
请在这个问题上帮助我
浏览 38提问于2013-07-12得票数 9
3回答
我在Highcharts中遇到这个问题已经有一段时间了。
工具提示：
在顶部，日期小时是UTC格式，我希望它采用与数据相同的格式(或本地时区，不应更改为UTC等，同时删除日期中的"T & Z“！)
我的关于工具提示的代码片段如下：
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day :
浏览 6提问于2014-09-10得票数 4
2回答
当你将xAxis定义为“DateTime”类型时，工具提示应该知道这是“point.x”值，并将其转换为DateTime格式。
xAxis: {
title: {
enabled: true,
text: 'Time Range'
},
type: "datetime"
},
我希望工具提示会为我提供可读的日期时间。
正如你所看到的，X轴是正确的，因为它使用了时间范围，然而，当你查看默认的工具提示时，你会得到纪元时间。
我知道你可以使用'point.
浏览 0提问于2014-10-30得票数 0
我已经工作了一段时间了，并且最近观察到了一种我无法理解的行为。这是关于highstock选项的，它允许工具提示的“日期部分”的自定义呈现。
Highcharts.stockChart('chart', {
series: [ { data: series_data } ],
tooltip: {
xDateFormat: "test custom date"
}
}
在实践中，我将此选项用于格式字符串，而不是硬编码字符串，但这与此问题无关。不寻常的是，在缩放后，自定义格式突然被忽略，并被默认格式所取代。
这似乎有某种截止
浏览 1提问于2022-04-13得票数 0
回答已采纳
假设我有一个带有两个系列的图，一个是OHLC和line。我想要定制工具提示，例如，我不想在工具提示中显示时间戳、OHLC系列的Open和High value，我想在line系列工具提示中添加一些自定义消息。
如何在Highchart中实现自定义工具提示？
$(function () {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 2
},
title: {
text
浏览 1提问于2013-06-18得票数 0
4回答
我第一次使用HighCharts JS。到目前为止，我印象非常深刻。我正在绘制倍数系列图，并使用共享工具提示。共享工具提示中的数字是正确的，但它们的格式并不像我所希望的那样。例如，我看到的是9876而不是9,876。
我知道我可以使用格式化程序完全自定义工具提示。与其完全重做工具提示，我只想格式化数字和保持现有的外观和感觉。
问题：可以为工具提示中的数字指定格式，而无需编写自定义格式化程序？
浏览 6提问于2012-02-08得票数 11
回答已采纳
我正在使用HighCharts，我想使用工具提示中的十字光标来帮助用户悬停特定的点。当该点悬停时，我希望在另一个div中显示该点的信息(即已完成)，但我希望阻止工具提示框出现。下面是“工作”代码：。如你所见，我做了一个显示:在工具提示中没有，但有一个“圆圈”仍然在那里。
感谢任何帮助:)
浏览 1提问于2011-04-10得票数 2
回答已采纳
1回答
我正在使用实心规范高图表插件，它是完美的，但当我想显示工具提示，并将其设置为真，它看起来不太好。我只想在量规中显示这个值，而不是别的，这是代码：
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
浏览 1提问于2014-07-08得票数 0
回答已采纳
我将该值提供给Highcharts饼图：
series:[
{
type:'pie',
name:'Ratio',
data:[
['A', 42.6],
{
name:'B',
y:14.2,
sliced:true,
浏览 0提问于2012-08-09得票数 13
回答已采纳
我使用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
回答已采纳
1回答
我有点迷失了一个我试图用Highcharts创建的图。默认情况下，Highcharts应使用UTC。在下面的图表中，我想使用UTC时间创建日出/日落图。然而，即使在我的代码中，例如：
[Date.UTC(2000,0,1,07,48),Date.UTC(2000,0,1,16,05)],
图表仍然从08:48开始，这对我来说毫无意义，因为日期是从07:48开始创建的
我创建了一个小提琴，你可以在那里看到。
任何帮助都非常感谢，我需要使用UTC，因为这个脚本必须工作，而不管系统时区
浏览 13提问于2017-07-05得票数 1
回答已采纳
我是highcharts的新手。默认情况下，Highchart会在图表内部显示工具提示。是否可以在图表外部显示工具提示，并将其显示在与显示inside.Any帮助相同的位置？
浏览 10提问于2013-02-06得票数 1
回答已采纳
我正在从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
回答已采纳
1回答
我试图在高图表中实现日期-时间序列图。我提供了UNIX时间戳，它为8小时的数据绘制了这样的数据：
如你所见，我不知道这张图表的日期。我想在第一点中显示日期(‘%e. %b')。现在，当一天发生变化时，它会自动显示如下24小时的日期：
这就是我现在的实现：
xAxis: {
type: 'datetime',
crosshair: true,
gridLineWidth: 0
}
我试过像下面这样使用格式化程序，但是除了第一点之外，它根本不显示日期：
xAxis: {
浏览 3提问于2016-10-31得票数 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
我需要在工具提示中进行货币转换，以便同时显示雷亚尔(巴西雷亚尔)和美元(美元)。该系列是R$，所以我需要在工具提示格式化程序中做一些数学运算来显示US$。但是我该怎么做呢？有谁可以帮我？
这是代码
$(function () {
Highcharts.setOptions({
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
});
$('#container').highcharts({
chart: {
type: '
浏览 12提问于2013-06-15得票数 2
我试着学习amCharts，现在我坚持从日期到日期更改工具提示格式。我现在有个小把戏：，我想把它从日期改为时间的工具提示标签在中是红色的。
我认为我应该修改代码的这一部分：
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness"
浏览 0提问于2018-03-09得票数 0
回答已采纳
这是一个代表性的。我想要的是所有四个数据元素都出现在工具提示上。目前，使用辅助yAxis的项没有出现。如果我将这个点设置为使用主yAxis，它仍然不会出现。看起来它的xAxis“链接”已经消失--它应该使用与其他3相同的xAxis类别值。
工具提示的代码：
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
浏览 2提问于2013-07-23得票数 0
回答已采纳
我已经用highcharts制作了一个两级树状图。Level 1显示了默认的工具提示，它是根据我的要求提供的。我不希望在级别2上有任何工具提示。请帮助。
浏览 2提问于2016-10-13得票数 0
我正在为我知道其时区的特定用户绘制UTC时间戳。每个数据点都采用"2018-06-19 13:19:52.000Z"格式，并被添加到要绘制为moment("2018-06-19 13:19:52.000Z").tz(this.tiemZone).valueOf()的一系列点中。
当绘制点时，它被绘制为6/19 13:19:52，但我希望它被绘制在用户的时区，所以类似于6/19 6:19:52。
我读到Highcharts以协调世界时绘制，但如果我设置useUTC: false (某处)，它将绘制在当前浏览器的时区，但我实际上想要绘制在用户的时区，例如，如果时区是
浏览 1提问于2018-07-02得票数 1
我有一个图表，看起来像下图。默认情况下，每个工具提示值都在它自己的工具提示“冒泡”中，日期时间在Y轴的底部(悬停在X标签的顶部)。
问题是更改日期时间的格式以匹配区域设置在Highcharts中不是动态的。我知道我可以让用户更改dateTimeLabelFormats以匹配他们的区域设置，但我希望利用moment.js和他们内置的区域设置格式。
我只需要更改这些图表中的datetime，而不需要更改其他内容。
当我尝试下面的代码时，它给了我想要的语言环境杠杆，但工具提示被合并到一个框中，没有默认的感觉。
tooltip: {
enabled: true,
dateTi
浏览 21提问于2019-02-07得票数 2
我的数据点包括以秒到小数点两位数表示的时间跨度。但是，为了显示的目的，我希望这些值以分钟、秒和百分之一的方式格式化。例如，在工具提示中，值125.78应显示为2:05.78，Y轴标签也应同样格式化。
$(function () {
$('#container').highcharts({
title: {
text: '800 Meter times',
x: -20 //center
},
xAxis: {
categories: [
浏览 3提问于2015-03-30得票数 1
回答已采纳
1回答
我试图使用一个HTML标题和一个非常大的工具提示。然而，我似乎无法使工具提示背景出现在标题的上方。
这是我的密码：
var chart = new Highcharts.Chart({
"chart": {
"type": "gauge",
"renderTo": "chart-2-container",
"marginTop": 60
},
"series": [{
"data": [{
"y
浏览 10提问于2017-09-05得票数 4
回答已采纳
我们在我们的网站上显示动态数据。用户可以选择不同类型的时间段，例如每月、每季度、每年、每十年等等。我们的问题是试图在xAxis上清晰地显示季度数据。我们可以使用格式化程序将工具提示正确显示为"Q1 2008“。我们想让xAxis做类似的事情。我们部分地做到了，但我认为我在这里做了一些粗略的错误。示例是在上。
我们尝试使用的代码位于xAxis标签[formatter][2]中
xAxis: {
alternateGridColor: '#FAFAFA',
labels: {
style: {
浏览 0提问于2013-05-14得票数 3
回答已采纳
我有以下问题：
如何使用Highcharts.js库自定义图表工具提示？
任何帮助都是非常感谢的。
浏览 3提问于2014-01-09得票数 1
回答已采纳
我很难找到一种方法来返回当前Y值的工具提示中图表中的前一个Y值。这个想法是，我想执行"this.y - this.y(-1)“的操作(得到这个。(y-1))值，并找出当前值和前面的值之间的区别。理想情况下，这将在工具提示中为图表中的每个值提供。
我的代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text
浏览 1提问于2017-09-29得票数 0
回答已采纳
我正在尝试编写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
回答已采纳
我正在我的应用程序中使用highcharts，并希望添加带有千分隔符的工具提示，就像我在数据标签中所做的那样。我对工具提示使用了自定义格式，那么我应该如何更改才能实现这一点
highcharts中的工具提示选项
tooltip: {
formatter: function () {
return (this.x + ':' + this.y);
},
shared: true,
useHTML: true
浏览 2提问于2015-10-08得票数 11
回答已采纳
1回答
我正在使用HighCharts，并且我想从图表中删除工具提示。
我通过以下代码做到了这一点：
tooltip: {
enabled: true,
}
我的需求是在工具提示中显示我想要在图表顶部显示的任何内容。当我们将鼠标悬停在任何点上时，该显示区域将按照工具提示的方式使用适当的数据进行更新。
浏览 1提问于2011-12-27得票数 1
回答已采纳
我可以在这里发布一些代码，但问题的标题正是问题所在。
我的chart.destroy()需要很长时间才能拿到75000分。每个点也有一个工具提示(使用的工具提示是Highcharts自己的工具提示)
此外，使用new Highcharts.Chart({ ...options...})绘制新图表也需要花费大量时间。
有没有人用Highcharts处理过这么多数据点？如果是，您是如何使其顺利运行的？4-5秒的延迟是可以的，但是我在渲染图表时得到了30秒的延迟。时间轴中的GC事件也显示了大量数据被垃圾收集。我感觉我没有一个解决方案，但我正在拼命寻找任何线索。
谢谢!
浏览 0提问于2014-09-04得票数 0
我有一个Highchart Graph，它绘制了温度，风，气压和降雨量。
可以在这里看到
我使用了一个共享的工具提示，增加了复杂性，即最大雨量是雨的堆叠列中最小值和最大值的总和。目前，代码忽略了我的基于序列的后缀，并且我还不能让单个小数工作(i.e.they都显示3位小数)。
每一项都有不同的后缀(Temp =(度符号)C、Wind = mph、压力= mb和Rain = in)和不同的小数位数(Wind = none、Temp = 1、Pressure =1和Rain = 3)。
我目前使用的是一个通用的工具提示，代码如下：
tooltip: { shared : true,
浏览 2提问于2013-03-20得票数 6
在饼图上显示工具提示时，Highcharts 3.0似乎存在浮点数精度问题。我能够通过使用highcharts演示饼图中的一个- 来重现准确的错误。单击“在JsFiddle中编辑”来编辑javascript。
在javascript面板中，查找series和data部分。保留Firefox和IE的数据，丢弃其余的数据，这样我们就可以只关注2块饼了。这两个数据块的百分比总和不是100，因此highcharts将为我们重新计算百分比。单击顶部的Run按钮，将鼠标悬停在切片上，百分比非常精确，最大小数位数。但是等等，看看javascript的工具提示选项，highcharts显然忽略了"pe
浏览 5提问于2013-04-10得票数 8
我正在尝试使用Highcharts显示自定义工具提示。你可以在这里找到一个代码的例子：
当您将鼠标悬停在图表上时，您可以看到工具提示仅包含来自系列2的值，而不包含来自系列1(不可见)的值。单击图例中的"Series 1“时，可以在工具提示中看到Series 1中的值。
编辑:没有要提交的code，只需修复链接/遵守编辑规则...
有没有办法在工具提示中显示不可见序列中的值？
浏览 0提问于2011-09-26得票数 13
回答已采纳
我是个使用highcharts的新手。
我有datepicker from和to，并从json文件中获取数据。
该图表每周显示一次。
我的x轴是周，所以我的工具提示显示周数。
我还想在图表的工具提示中显示日期，比如假设，在第一周，日期范围是31-03-2013到06-04-2013，当点在第一周时，我需要在工具提示中显示此日期，而不更改x轴。
有没有人能帮上忙。
这是我的代码，
$(function () {
$('#container').highcharts({
title: {
text: typ
浏览 4提问于2014-06-06得票数 0
我对海图有点陌生。我想只在工具提示悬停上显示日期。(目前正在显示日期和时间)。这是小提琴。
您会注意到，如果您悬停在数据点上，工具提示会显示日期随时间变化。我只想约会。
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Daily Calories'
浏览 0提问于2017-11-22得票数 0
回答已采纳
1回答
在演示站点中，有一个使用系列比较()的示例。
在本例中，每个系列都有相同日期时间的值。我要画的是几个系列，但每个系列都有自己的频率(即，每天一次，每小时一次，每10分钟一次)。它可以工作，但是工具提示显示：
当我们超过一整天的日期时，这三个值。
当我们超过全时日期时，每小时和10‘值。
当我们超过10‘日期时，只有10’值
是否可以始终显示这3个值？或者通过外推法推断中间值(最好)，或者在同一工具提示中显示3次日期/值。
诚挚的问候
浏览 0提问于2015-01-06得票数 0
我正在尝试调整这个日期系列的Highcharts散点图
series: [{
data: [[1,2],[2,5]]
}]
这样我就可以在每个点上放置一个名称，我希望在工具提示中显示该名称。可以这样定义具有命名值的对象
series: [{
data: [{
name: 'Point 1',
x: 1,
y: 2
}, {
name: 'Point 2',
x: 2,
y: 5
}]
}]
但是似乎x和y的值没有被拾取。请参阅我的示例。
浏览 2提问于2011-07-02得票数 10
回答已采纳
有时很难让Highcharts Javascript图表库为某些数据点显示工具提示。例如，尝试在以下链接上显示位于50,50处的数据点的工具提示。很难让它显示出来，而且它会闪烁很多。有没有人知道一些解决办法？
我用最新的Chrome和Firefox试用了一下。
浏览 3提问于2013-03-06得票数 0
我有一个简单的折线图，其中我试图显示有开始和结束的时间序列数据。像这样 {"beginTimeSeconds": 1626145840, "endTimeSeconds": 1626232240, "totalTimeInSeconds": 0, "uri": "/logout"} 但是，根据HighChart配置，时间序列只接受一个时间戳，如下所示。 Highcharts.chart('container', {
chart: {
zoomType: 'x'
浏览 67提问于2021-08-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
