javascript - 工具提示中的 Highcharts 表格样式不起作用

Question

我的 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/

Answer 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/