Highchart工具提示格式化程序函数无法获取x值(this.x)？
Highchart是一款流行的JavaScript图表库，用于创建交互式和动态的数据可视化图表。在Highchart中，工具提示格式化程序函数用于自定义工具提示框中显示的内容。
当工具提示格式化程序函数无法获取x值(this.x)时，可能是由于以下原因：
- 数据格式不正确：确保你的数据格式正确，并且x值在数据中存在。如果数据格式不正确，可以使用Highchart提供的数据处理函数进行转换。
- 事件绑定问题：如果你在绑定工具提示格式化程序函数时，没有正确设置事件绑定，可能导致无法获取x值。请确保你正确地将工具提示格式化程序函数绑定到相应的事件上。
- 上下文问题：在某些情况下，this关键字可能会指向不正确的上下文，导致无法获取x值。你可以尝试使用箭头函数来确保正确的上下文。
解决这个问题的方法可能因具体情况而异。如果你能提供更多的代码和上下文信息，我可以给出更具体的建议。
关于Highchart的更多信息和使用示例，你可以参考腾讯云提供的Highchart产品介绍页面：Highchart产品介绍。
相关·内容
我有一个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
我目前正在建立一个应用程序，我想有一个高特许权股票与其他信息的工具提示。
#Data
df <- data.frame(time = seq(as.Date("2021-03-10"), length = 10, by = "days"),
values = 1:10,
additionalInfo1 = LETTERS[1:10],
additionalInfo2 = letters[1:10])
#Packages
library(highchart
浏览 6提问于2021-03-10得票数 0
这里我使用的是带有codeigniter的highchart。我得到了高表记录与图形，但我希望记录来自mysql数据库字段的"zreadactivity“在工具提示。我无法在工具提示中获得"zreadactivity“的适当名称，因为它包含记录。所以，我只想知道我被困在哪里了？下面是我的代码: Controller：
public function branchwiseactivityavg()
{
$data = $this->Data->branch_wise_activities();
$category = arra
浏览 1提问于2015-09-01得票数 0
我正在使用股票图表来显示趋势数据。在后端，我得到了valueSuffix应该是什么(或valuePrefix，视情况而定)。我还在格式化工具提示中的日期显示。以下是该系列声明的重要部分：
...
name: 'Wages',
tooltip: {
valuePrefix: '$',
valueDecimals: 0
},
...
以下是工具提示格式化程序：
...
tooltip: {
formatter:
浏览 2提问于2013-09-10得票数 2
我有一个具有2个yaxis的图形，我正在努力在工具提示格式化程序中获得每个系列的yaxis标题。
这是我的格式化函数：
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('$hc_date_long', this.x) +'</b><table>';
sum = 0;
var abweichung = 0;
var stellen = 0;
$.each(this.points, function(
浏览 2提问于2013-02-12得票数 4
5回答
如何使用图表工具提示格式化程序？我正在使用高图表的react包装器。
我有这样的配置：
const CHART_CONFIG = {
...
tooltip:
{
formatter: (tooltip) => {
var s = '<b>' + this.x + '</b>';
_.each(this.points, () => {
s += '<br/>' + this.s
浏览 4提问于2017-08-10得票数 12
回答已采纳
我有一个数据集(csv)可以呈现为折线图，还有一个工具提示可以显示数据集中的日期等数据。在chrome中它可以正常工作，但在IE (最新版本)和firefox 58中，它将日期呈现为‘1970年1月1日’。我假设如果日期在Chrome中显示ok，其他浏览器也会效仿。这是我的工具提示行： <div class="tooltip-date">' + Highcharts.dateFormat('%d %b %Y', this.x) + '</div> 有没有人知道如何解决这个问题？ csv中的日期如下:2016年1月25日
浏览 18提问于2019-01-18得票数 0
1回答
如何创建用户图表中的
、、、、
我正在尝试创建一个像下面这样的比较图，它将显示当前的数据与当前的减去7天(或20天或90天，.)。
为此，我使用高级图表和High图表的react包装器，并使用以下数据创建了一个多行图：
series: [
{
name: "Weekly",
data: [
24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726, 34243,
31050,
],
},
{
name: "Weekly Last We
浏览 5提问于2022-10-10得票数 0
一开始我这样做：
var highchartData = [];
<start loop>
var miniArray = [];
miniArray.push(result[i].NumberOfKittens);
miniArray.push(result[i].TimeOfBirth);
highchartData.push(miniArray);
<end loop>
$('#highchart').highcharts().addSeries({
name: "Kittens born",
data: hig
浏览 5提问于2017-08-02得票数 1
回答已采纳
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
回答已采纳
1回答
我有三个图表。这三个图都有相同的x轴值(类别)、不同的y值和相同的z值(日期)。当你在一个点上盘旋时，这些图表有同步的工具提示。我希望能够为每个点填充带有z坐标的工具提示。我不不想画z坐标.把它显示在工具提示里。我不知道如何做到这一点，因为有更多的同步工具提示的多个图形。
我做了一个基本的例子来演示如何将z值(日期)放在一个图的工具提示中。
Highcharts.chart('container', {
tooltip: {
formatter: function() {
return 'x: ' + this.x +
浏览 2提问于2020-03-12得票数 0
回答已采纳
如果我使用的是默认的高级图表工具提示，它会显示一个圆圈--图表数据的颜色(上的浅蓝色圆圈)：
但是，如果在工具提示()上使用自定义格式，则颜色不会出现：
如何在自定义格式化工具提示中获取/使用该颜色？据我所知，他们的文档()中没有任何东西解释如何在定制的格式化工具提示中使用这一点。
默认情况下，这将在工具提示中显示数据颜色：
tooltip: {
shared: true
}
但这并不意味着：
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +
浏览 1提问于2014-05-08得票数 42
回答已采纳
使用Highchart，每个数据点的工具提示位置
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
}
},
问题是，上面的选项还会更改标志的工具提示位置。
如何更改选项，使数据点的工具提示固定为上述选项，但标志的工具提示位置保持不变？
浏览 0提问于2013-11-18得票数 1
1回答
我有一个像"Sprint 123<br>April 01"这样的复杂类别，我只需要在X轴上显示Sprint，但是工具提示应该包括这两个部分。因此，我创建了一个函数，它只去掉sprint数：
this.chartOptions.xAxis.categories=this.getSprintNums(this.response.categories);
It does show them appropriately.
Trying to build tooltip:
const cats = this.response.categories;
this.chart
浏览 1提问于2021-03-22得票数 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
我正在尝试改变工具提示的背景color.This是它现在的样子。
我使用的格式化程序函数是
tooltip: {
useHTML: true,
enabled: true,
//backgroundColor: null,
borderWidth: 0,
shadow: false,
formatter: function () {
var value = '<div style="background-color:red;"&g
浏览 0提问于2016-01-20得票数 0
目前我有这样的脚本。这里是编号为(1,2，...)的categories1数组data1数组包含x轴(3，8，2，1)的值，data2数组包含在工具提示中显示的值。
我想在x轴上显示categories1数组，并在工具提示中显示data2数组。
$(function () {
var jsonData = JSON.parse('[{"category":"Abc","value":3},{"category":"abc1","value":8},{"category
浏览 2提问于2013-11-21得票数 0
1回答
我有一个散射序列，两个点具有相同的坐标。每个点都有不同的相关数据(例如，不同人的体重和身高--两个不同的人可以拥有完全相同的身高和体重)：
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:
浏览 3提问于2013-02-25得票数 3
我使用的是高图表的同步图表，但是在工具提示选项中使用格式化程序函数有问题。每个图表都有不同的格式要求(% vs整数和浮点数等)，但是它似乎只是对每个图表的工具提示采用了最后一个图表的格式。
这是出乎意料的，因为我没有这样的问题，因为图表标题以及y轴格式，这是正确的。这是我目前拥有的代码(缩写为很长的代码，否则)：
for (var j = 0; j < json.data.length; j++) {
$('#highchart_metric' + i + '_').highcharts({
chart: {
type: '
浏览 2提问于2017-05-16得票数 0
回答已采纳
使用约书亚·康特的，我试图添加一个自定义工具提示和格式数字，这样成千上万的人就有了一个逗号分隔符。使用以下代码时，如果不自定义工具提示，则Y轴和工具提示格式正确：
snow <- read.csv("https://gist.githubusercontent.com/smach/d4188d200b465cba822405c323f1501c/raw/58c3785c34304ccc5dbcef632d3acb9d6dbad40c/BosChiNYCsnowfalls.csv", stringsAsFactors = FALSE)
library("highch
浏览 3提问于2017-03-19得票数 3
回答已采纳
我一直在尝试调用我自己的函数来格式化高级图表vue中工具提示中的x和y轴值。考虑以下几点；
data() {
return {
currencySymbol: "$",
};
},
computed: {
chartOptions() {
var symbol = this.currencySymbol;
return {
chart: {
type: "spline"
},
title: {
text:
浏览 4提问于2019-09-23得票数 0
回答已采纳
有人能告诉我如何通过HighChart线图()通过JavaScript获取一个线系列的所有值吗？
另外，如何通过JavaScript获得散点图中某一点的工具提示值？我已经尝试过触发“mouseover”，使用下面的代码在基本的线条图(上面的链接)获得工具提示。
function simulateMouseOver() {
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': tru
浏览 4提问于2013-11-14得票数 1
回答已采纳
我正在使用highchart导出服务器将highchart导出为itextsharp中的psd。
我已经创建了一个处理程序，它将给我的高度表作为png图像，该图像被渲染为itext pdf。
因此，我的渲染是:使用json文件将highchart转换为图像，该文件将用于将其渲染为pdf。
预期：
问题是我无法添加阻止在highchart pdf中呈现0值的代码。
formatter: function () {
if (this.y != 0) {
return Highcharts.numberForm
浏览 5提问于2018-01-29得票数 0
我是highcharts的新手。默认情况下，Highchart会在图表内部显示工具提示。是否可以在图表外部显示工具提示，并将其显示在与显示inside.Any帮助相同的位置？
浏览 10提问于2013-02-06得票数 1
回答已采纳
示例代码：
formatToolTip: function() {
var tt = this.x + ' = ' + this.y + ' (this.percentage + ' %)';
return tt;
}
this.percentage始终是未定义的。我是一个使用highcharts 3.0.0的新手
浏览 1提问于2013-04-17得票数 0
通常能够根据highchart中系列的名称调整工具提示格式，使用以下类型的代码：
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +
(this.series.name == 'Recovered' ? '%' : '');
浏览 0提问于2013-01-28得票数 5
回答已采纳
我的图表每秒更新一次，我想在工具提示中显示时间戳(例如，2016年4月7日，15:12:38)，并在x轴上显示日期。它应该看起来像这个：。我不知道如何自定义我的图表。我附上一段代码：
$('#container').highcharts({
chart:{
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
浏览 1提问于2016-05-30得票数 0
1回答
我有一个高图表线图，通过php和javascript从MySQL数据库中输入。我有正确的图表显示，这两行都是他们应该出现。唯一的问题是工具提示(我相信它被调用了)，当我将它设置为shared时: true，它将共享数据点，但是它不会显示任何工具提示，即使十字线被选择为true，它也会移除十字线，但是当我删除shared，并设置为'false‘时，它将执行正确的行为，分别选择它们并显示工具提示，使用值命名。我已经改变了它，并且不知所措。
这里是我的代码：
<!DOCTYPE HTML>
<html>
<head>
<met
浏览 1提问于2014-06-03得票数 0
回答已采纳
我正在尝试使用高级图表来生成我们网站的可用性信息。Y轴是可用的百分比，预期标签是：
[100, 99.9, 99, 90, 0]
代码：
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
浏览 2提问于2013-12-18得票数 1
回答已采纳
1回答
我用Date.parse()函数转换了所有的x值
我怎样才能得到我的期望呢？
- change x label and x value as "%Y%m%d" in tooltip
- remove the strange 12:00 empties on x-axis
谢谢
隐蔽函数
$.each($scope.flights, function() {
var current_flight_no = this
$.each(current_flight_no.data, function(){
this.x = Dat
浏览 3提问于2016-03-09得票数 0
在点击任意点或条形图时，我想要一个警告，给出X轴值.我在Visual中使用dotnet.highcharts，我尝试了以下方法
public partial class regression
{
DataSet dsSeries = new DataSet();
ArrayList totalCount , failCount,passCount ,Week = new ArrayList();
object[] totalValues, passValues, failValues;
protected void Page_Load(object sende
浏览 3提问于2014-03-11得票数 0
我在图形中修改Highchart JS的工具提示。但产出并没有像我预期的那样出现。我想在工具提示的右侧打印百分比。
示例:对忠诚度的满意度:4 (20%)
我已经添加了两个数组，以便根据一系列的图形在工具提示的右侧添加valueSuffix。但它在单个工具提示上打印所有数组值。
我已经尝试了下面的代码来修改Highchart。
$(function() {
$('#container').highcharts({
title: {
text: ''
},
charts: {
zoomType: 'x
浏览 0提问于2018-09-11得票数 0
我正在使用Dotnet Highchart。我从一个总共有10列的数据库表中获取数据，并使用它的两列来显示图表。
我需要在工具提示(类摘要)中显示所有10列，但我不知道是否可以做到这一点？您能指导我如何将所有列的数据传递到表中并在工具提示中显示吗？
感谢您的时间和帮助。
浏览 1提问于2013-11-24得票数 0
我需要在工具提示上显示3个值:时间、值和另一个值(更改)。
我看到了 (但是jsdfiddle不工作)。
我试过了
//each loop..
indice.push(["time", "value1", "value2"]);
，工具提示设置
tooltip:
{
useHTML: true,
formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +';
浏览 0提问于2012-07-02得票数 22
回答已采纳
高图表做了一个伟大的工作，自动格式化日期，在x轴和工具提示。不幸的是，我需要一个自定义函数来格式化我的y-值，而/plotOptions/line/tooltip/pointFormat只接受一个格式字符串，而不是一个函数，所以我不得不设置/tooltip/formatter。如何获得格式化日期(例如，10月13日或20日)，如x轴所示？我似乎无法从那里访问point.key，只有原始的millis值。
浏览 5提问于2013-10-17得票数 3
回答已采纳
我有一个图表，它可以显示各种天气数据，而且它做得很正确。
工具提示可以很好地处理系列中的数据，但我想以附加文本的形式向另一个数据数组中的每个数据添加一些附加数据。
第一个数据数组是
var hightemp = new Array(12.2, 12.9, 22.7, 26.0, 29.8, 31.5
,33.5, 30.5, 25.1, 23.6, 15.2, 13.2);
第二个是
var hightempT = new Array("at 16:44 on 29 January 2013"
浏览 2提问于2013-03-07得票数 0
我正在使用Highcharts来画一张图。我希望工具提示显示x轴的精确值(例如，1930-07-01)。我在工具提示格式化程序中使用了(this.x)，它显示x轴为0。
如何在工具提示中显示1930-07-01值？
浏览 0提问于2013-08-04得票数 11
有人可以在highchart中发布自定义聚合方法的示例吗?我想创建一个自定义聚合方法，它使用工具提示将以下点分组为一个点？我有一个具有以下数据array1的数组:' apple ',2,4,10,12.5我希望上面的数组在一个单独的分组点中表示，工具提示如下所示:apple no of apple:2min:4max:10 array1:12.5
浏览 7提问于2013-10-08得票数 0
嗨，我有一些问题，得到齿尖显示正确的信息。现在它会显示这个。
以下是一个示例：
我想删除星期一之前出现的“星期一起的一周”这个短语。我尝试过更改图表选项中的工具提示对象参数，但没有起到任何作用。下面是图表选项现在的样子
var options = {
chart: {
renderTo: 'stock-chart-container',
alignTicks: true,
},
tooltip: {
dat
浏览 0提问于2013-11-12得票数 2
回答已采纳
我有一个有4列的数据帧。我使用两列(x，y)来绘制x和y。第三列(group)用于分组。并且没有使用我的第四列(cat)，但我希望它显示在工具提示中。
这是我的数据框架。
library(rCharts)
df <- data.frame(x=c(1:12,1:12),
y=c(0.6, 0.5, 0.3, 0.3, 0.8, 0.99, 0.6, 0.5, 0.4, 0.7, 0.6, 0.8,
0.4, 0.5, 0.7, 0.7, 0.2, 0.01, 0.4, 0.5, 0.6, 0.3, 0.4
浏览 6提问于2015-08-19得票数 0
我正在使用highchart在xAxis上的绘图线旁边显示一些文本。我想从格式化程序功能中自定义每个标签，因为它可以在图表中的每个其他标签上使用。
我见过，但他们在使用TypeScript，而我没有。
我要做的是：
vay chart = new HighChart({
...
xAxis: {
plotLines: [{
id: "plotLines",
zIndex: 15,
color: myColor,
width: 1,
value:
浏览 0提问于2014-01-22得票数 1
我使用HighChart来显示一些容器的内存使用情况。问题是，有时刻度是K，有时是M，有时没有刻度(如下图所示)：
下面是我创建HighChart的方法：
var cursor = Template.currentData();
liveChart = Highcharts.chart(cursor.chart_id, {
title: {
text: 'Memory usage of the controlcontainers_mongo_1'
},
xAxis: {
浏览 7提问于2017-01-23得票数 0
回答已采纳
1回答
我使用High曲线图4.2.3来创建一个线性回归图表。我正在跟踪这个演示：
这是演示中的代码：
Highcharts.chart('container', {
xAxis: {
min: -0.5,
max: 5.5
},
yAxis: {
min: 0
},
title: {
text: 'Scatter plot with regression line'
},
series: [{
type: 'line'
浏览 3提问于2018-01-20得票数 1
回答已采纳
2回答
我有一张数据文件，看起来像：
## Data
df <- data.frame(label = c("A", "B", "C", "D"),
color = c("red", "red", "blue", "green"),
y = c(10, 11, 12, 13))
"A“和"B”是同一类别的一部分，而"C“和"D”是单独类别的一部分。
我想在图表上添加一
浏览 0提问于2015-02-06得票数 2
回答已采纳
8回答
我的问题是，当的图表绘图区域小于highchart工具提示时，工具提示的一部分会隐藏在溢出图表绘图区域的位置。
我希望工具提示始终可见，无论图表绘图区域的大小如何。
CSS设置没有帮助，更高的z-index设置也没有帮助。
这是我的例子..。
任何帮助都会得到很大程度上的重视。
谢谢。
浏览 7提问于2012-05-24得票数 37
回答已采纳
我有一个highcharts页面/柱状图，显示了employees....ie的所有当前角色和数量: Developer - 3，and - 2，Master Developer-1。我能够很好地显示每个类别的工具提示信息。我不能做的是在工具提示中汇总/组合这些信息。当前工具提示代码：
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><b>{point.name}</b>: {point.perce
浏览 1提问于2019-04-22得票数 0
2回答
我遇到了具有可点击元素的highchart工具提示。问题是你不能可靠地点击它们。
增加tooltip.hideDelay可以更容易地在工具提示内单击。这并不能完全解决问题。
我希望能够在工具提示中悬停并单击任意时间。只有当鼠标指针离开工具提示时，才应将其取消。
浏览 3提问于2017-08-26得票数 2
1回答
我试图编辑工具提示，这样我就可以对图形上的每个点都有唯一的名称。我正在尝试下面的代码，但它不起作用。
这是小提琴：
tooltip:
{
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
}
}
浏览 2提问于2015-01-24得票数 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工具提示值(this.x，this.y)显示给图表之外的另一个特定<div>？
下面是一个例子。
我想它使用的是，但我不知道细节。
浏览 14提问于2021-03-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
