Highcharts: показать общее количество стека в общей всплывающей подсказке, через свойство footerFormat

#javascript #jquery #highcharts

Вопрос:

У меня есть столбчатая диаграмма с общей всплывающей подсказкой, и я пытаюсь вывести общую сумму стека во всплывающую подсказку через свойство footerFormat.

Я думал, что это будет простое свойство, к которому я мог бы получить доступ, но я не нашел для него подходящего варианта.

Я упускаю что-то очевидное, или мне нужно сделать это более сложным способом?

(если я пропустил дубликат этого вопроса, пожалуйста, дайте мне знать, я не смог найти конкретные обстоятельства, которые я хочу обсудить)

код:

 tooltip : {
    shared          : true,
    useHTML         : true,
    headerFormat    : 
         '<table class="tip"><caption>Group {point.key}</caption>'
         '<tbody>', 
    pointFormat     : 
         '<tr><th style="color: {series.color}">{series.name}: </th>'
         '<td style="text-align: right">${point.y}</td></tr>',
    footerFormat    : 
         '<tr><th>Total: </th>'
         '<td style="text-align:right"><b>${???}</b></td></tr>'
         '</tbody></table>'
}

Скрипка: http://jsfiddle.net/jlbriggs/AeLFZ /

1. Вы имеете в виду что-то вроде этого: jsfiddle.net/robertrozas/AeLFZ/9

2. Что-то в этом роде, но мне нужно сохранить ‘shared: true’ и ‘useHTML: true’, и мне нужно, чтобы это было частью footerFormat, а не pointFormat.

3. Другое решение: jsfiddle.net/robertrozas/AeLFZ/11

Ответ №1:

footerFormat не имеет доступа к ${point} . Смотрите документацию по footerFormat .

Если вы хотите иметь таблицу с использованием каждой точки shared:true , вам нужно использовать функцию форматирования следующим образом:

 formatter: function() {
            var tooltip='<table class="tip"><caption>Group ' this.x '</caption><tbody>';
            //loop each point in this.points
            $.each(this.points,function(i,point){
                tooltip ='<tr><th style="color: ' point.series.color '">' point.series.name ': </th>'
                        '<td style="text-align: right">' point.y '</td></tr>'
            });
            tooltip ='<tr><th>Total: </th>'
             '<td style="text-align:right"><b>' this.points[0].total '</b></td></tr>'
             '</tbody></table>';
            return tooltip;
        }

http://jsfiddle.net/AeLFZ/10/

1. Спасибо. Кажется довольно глупым не иметь доступа к такой информации в любой части всплывающей подсказки и не иметь готового доступа к итоговым значениям стека из любой точки, когда есть такая приятная настройка со свойствами формата заголовка, точки и нижнего колонтитула. Использование форматера и запуск цикла похоже на шаг назад…

2. Это относится к tooltip: объекту в API high charts. Также используйте shared: true, и useHTML: true, в том же объекте.

Ответ №2:

Вот мой подход, использующий footerFormat и его 100% рабочий

 tooltip: {
     shared: true,
     headerFormat: '<b>Week {point.x}</b><br>',
     pointFormat: '<b>{series.name}:</b> {point.y} ( {point.percentage:.0f}% )<br>',
     footerFormat: '<b>Total:  {point.total} </b>'
},