Question

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

这是我的最高图表： 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

因此，无需在plotOptions内添加工具提示，只需将tooltip移动到主对象即可。并将其从plotOptions中删除。

Answer 2

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

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/

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

2 个答案: