Стиль таблицы 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/

Answer 2

Поэтому вместо добавления всплывающей подсказки внутри plotOptions просто переместите tooltip к основному объекту.И удали его из plotOptions.