Highcharts chart.tooltip.formatter overriding series. tooltip.pointFormatter？

carvr3hs 于 2024-01-09 发布在 Highcharts

关注(0)|答案(3)|浏览(199)

我的方法是用特定的工具提示格式配置一个图表：

Highcharts.chart('container', {
    tooltip: {
            formatter: function () { return 'Default Format ...';  }
    },
    ...
}

字符串
.对于某些系列，我需要指定一个modyfied格式化程序：

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      pointFormatter: function () { return 'Custom Format...'; }
    }
  }, 
  ...
]

型
所以这不起作用，因为，正如我所发现的，chart-tooltip-formatter总是覆盖series配置的pointFormatter。如果你注解掉charts tooltip-configuration，你可以尝试这个here。
我希望有一种方法可以在整个图表的格式化程序功能上设置一个“默认”工具提示配置，并有可能在某些系列中覆盖它。有没有一种方法可以做到这一点？
我发现了一些方法，比如this，但是我需要一个比在formatter函数中if-elseing系列名称更通用的方法。我还希望能够修改值，所以像'valueSuffix'这样的属性不能让我走得太远。

highcharts

来源：https://stackoverflow.com/questions/43388706/highcharts-chart-tooltip-formatter-overriding-series-tooltip-pointformatter

3条答案

按热度按时间

zxlwwiss1#

我不太确定这个覆盖是如何发生的，但正如你提到的，tooltip.formatter优先。而不是使用tooltip.formatter移动相同的函数到plotOptions.series.tooltip.pointFormatter。这应该像你期望的那样工作，一般使用plotOptionspointFormatter，在特定情况下使用seriespointFormatter。
例如（JSFiddle）：

plotOptions: {
    series: {
        tooltip: {
            pointFormatter: function () { return 'Default ' + this.x + '</b> is <b>' + this.y + '</b>';  }
        }
    }
},
series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        pointFormatter: function () { return 'Custom Format...'; }
    }
}]

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-09

eqfvzcg82#

要避免覆盖，您需要为图表工具提示使用选项headerFormat，并为各个系列定义点格式
https://api.highcharts.com/highcharts/tooltip.headerFormat
语法有点不同，但至少它提供了基本的格式选项
假设您需要自定义日期格式并操作字体大小和颜色，
你的代码应该看起来像这样：

Highcharts.chart('container', {
    tooltip: {
        valueSuffix: '',
        xDateFormat: '%a, %b %e at %l:%M %p',
        headerFormat: '<span style="font-size: 14px; font-weight: 500; color: #8995a0;">{point.key}</span>',
    },
    ...
}

字符串
.对于某些系列，指定修改的格式化程序：

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      pointFormatter: function () { return 'Custom Format...'; }
    }
  }, 
  ...
]

型

展开查看全部

赞(0）回复(0）举报 2024-01-09

hfsqlsce3#

在某些情况下，您可以将图表的格式化程序函数链接到点格式化程序函数as per this JSFiddle。fiddle具有一个格式化程序，该格式化程序具有一个“福尔斯”到默认格式化程序的条件子句：

formatter: function (tooltip) {
    if (this.point.value === null) {
        return 'Null';
    }
    // If not null, use the default formatter
    return tooltip.defaultFormatter.call(this, tooltip);
}

字符串
Highcharts默认格式化程序将调用您设置的任何自定义点格式化程序。

赞(0）回复(0）举报 2024-01-09

我来回答

Highcharts chart.tooltip.formatter overriding series. tooltip.pointFormatter？

3条答案

相关问题

热门标签

最新问答