Highcharts - необходима расширенная функциональность всплывающей подсказки - PullRequest
Новая
       13

Highcharts - необходима расширенная функциональность всплывающей подсказки

1 голос
/ 26 августа 2011

У меня возникла проблема при построении графика с использованием графика с нормальным стекованием. Мой последний вопрос, который я задал здесь, был: Справка Highcharts - Укладка диаграммы области

Который в основном спрашивал, как построить значения в стеке без нормализации данных. Мне сказали, что я могу вычесть одну серию из другой, чтобы график выглядел правильно, однако значения при наведении курсора перекошены из-за этого вычисления.

Пример: До: 

Series Total:      [0,0,0,1,1,2,3]
Series In-Service: [0,0,0,0,0,1,2]

Итак, я исправляю данные для их отображения: 

Series Total:      [0,0,0,1,1,1,1]
Series In-Service: [0,0,0,0,0,1,2]

Теперь он хорошо отображается, но подсказка неверна, например, последняя точка данных должна быть: 

Series Total:      3
Series In-Service: 2

Но это показывает: 

Series Total:      1
Series In-Service: 2

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

Пожалуйста, задавайте любые вопросы, если мне неясно, мне действительно нужна помощь.

Ответы [ 2 ]

5 голосов
/ 03 апреля 2012

Использовать список объектов при настройке данных серии. Вы можете добавить дополнительные параметры к объекту datapoint и получить к нему доступ из средства форматирования всплывающей подсказки.

См. http://jsfiddle.net/jgdreyes/JvSBk/ для примера. 

var seriesTotal = [
    {x: 0, y: 0, customTooltip: 0},
    {x: 1, y: 0, customTooltip: 0},
    {x: 2, y: 0, customTooltip: 0},
    {x: 3, y: 1, customTooltip: 1},
    {x: 4, y: 1, customTooltip: 1},
    {x: 5, y: 1, customTooltip: 2},
    {x: 6, y: 1, customTooltip: 3}
];

var chart = new Highcharts.Chart({

    series: [
        {data: seriesTotal}
    ],

    tooltip: {
        formatter: function() {
            //access customTooltip option
            return this.point.customTooltip;
        }
    },
});
1 голос
/ 26 августа 2011

Хотя, возможно, не оптимально, я сделал следующее в подобных ситуациях:

В моей конфигурации я настроил средство форматирования всплывающей подсказки для использования имени точки. 

tooltip: {
  formatter: function() {
    return this.point.name;
  }
}

И затем, когда я добавляю баллы, я просто устанавливаю имя с моим пользовательским HTML, как в ... 

// get x, y and other vars
series[0].addPoint({x: x, y: y, name: 'In Service: ' + inService }, false);
series[1].addPoint({x: x, y: y, name: 'Total: ' + total }, false);

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

...