工具提示中的 Highcharts 表格样式不起作用答案

【问题标题】：Highcharts table style in tooltips not working工具提示中的 Highcharts 表格样式不起作用
【发布时间】：2019-01-16 09:56:07
【问题描述】：

我的 Highchart 工作正常，但工具提示出了点问题。我想要表格样式的工具提示，我找到了一个匹配的官方示例。经过大量尝试，它只是无法正常工作。请检查我的 js，也看看我的 jsfiddle。

这是我的 Highchart： https://jsfiddle.net/bardirian/5qndmvLh/2

    tooltip: {
    useHTML: true,
    headerFormat: '<table>',
    pointFormat: '<tr><th colspan="2"><h3><b>{series.name}　　</b></h3></th></tr>' +
        '<tr><th>FS:</th><td>{point.x}</td></tr>' +
        '<tr><th>　AT:</th><td>{point.y}</td></tr>',
    footerFormat: '</table>',
    valueDecimals: 2
  }

这是官方演示： http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/footerformat/

【问题讨论】：

预期输出是什么？
@brk 如您所见，我的工具提示表无法作为官方演示使用，我在 chrome 中检查了我的输出 html，他们甚至没有
html 代码。

标签： javascript highcharts

【解决方案1】：

您可以为每个系列单独设置一些工具提示选项：

https://api.highcharts.com/highcharts/series.column.tooltip,

但例如useHTML 只能在主工具提示配置对象中设置：

https://api.highcharts.com/highcharts/tooltip

所以，你可以这样启用useHTML：

plotOptions: {
        ...,
        tooltip: {
            headerFormat: '<table>',
            pointFormat: '<tr><th colspan="2"><h3><b>{series.name}　　</b></h3></th></tr>' +
                '<tr><th>FS:</th><td>{point.x}</td></tr>' +
                '<tr><th>　AT:</th><td>{point.y}</td></tr>',
            footerFormat: '</table>',
            valueDecimals: 2
        }
    }
},
tooltip: {
    useHTML: true
},

或将所有选项移至主配置对象：

tooltip: {
    useHTML: true,
    headerFormat: '<table>',
    pointFormat: '<tr><th colspan="2"><h3><b>{series.name}　　</b></h3></th></tr>' +
        '<tr><th>FS:</th><td>{point.x}</td></tr>' +
        '<tr><th>　AT:</th><td>{point.y}</td></tr>',
    footerFormat: '</table>',
    valueDecimals: 2
},

现场演示：https://jsfiddle.net/BlackLabel/ev4pnuat/

【讨论】：

不知道为什么在我检查了你的小提琴之后，我在工具提示之后添加了另一个工具提示：{ useHTML: true }，它就像你的一样工作。是的，这就是我从你 Fiddle 那里找到的……

【解决方案2】：

所以不要在plotOptions 中添加工具提示，只需将tooltip 移动到主对象即可。并将其从plotOptions 中删除。

【讨论】：

能给我一个 jsfiddle 演示吗？