高级图表chart.tooltip.formatter覆盖series.tooltip.pointFormatter？

Question

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

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

..。对于某些系列，我需要指定一个修改的格式化程序：

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...'; }
    }
  }, 
  ...
]

因此，这是行不通的，因为，正如我所理解的，图表工具提示格式化程序总是覆盖系列配置的pointFormatter。您可以尝试此这里，如果您注释掉图表工具提示配置。

我希望有一种方法来为整个图表设置对格式化程序函数的“默认”工具提示配置，以及为某些系列设置重写此配置的可能性。是否有办法这样做？

我找到了一些类似于这的方法，但我需要比格式化程序函数中的if-elseing系列名称更一般的分配。我也希望能够修改值，所以像'valueSuffix‘这样的属性不会让我走得太远。

Answer 1

我不太清楚这种覆盖是如何发生的，但是正如您提到的，tooltip.formatter优先。不要使用tooltip.formatter，而是将相同的函数移动到plotOptions.series.tooltip.pointFormatter。这应该如您所期望的那样工作，通常使用plotOptions pointFormatter，在特定情况下使用series pointFormatter。

例如(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...'; }
    }
}]

Answer 2

为了避免覆盖，您需要对图表工具提示使用选项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...'; }
    }
  }, 
  ...
]