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/

标签： javascripthighcharts

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/