2014-07-15 3 views
0

Я использую Highcharts для создания диаграмм для веб-приложения. Мне нужно отобразить диаграмму с 2 yAxis: первая для десятичных знаков и вторая в течение нескольких часов.Формат всплывающей подсказки по серии в Highcharts

Для отображения часов, я конвертирован моя дату в секундах, поместите их в нескольких рядах, затем использовал этот скрипт для форматирования часов:

function secondsTimeSpanToHMS(s) { 
var h = Math.floor(s/3600); 
s -= h * 3600; 
var m = Math.floor(s/60); 
s -= m * 60; 
return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); 
} 

... 
labels: { 
    formatter: function() { 
    return secondsTimeSpanToHMS(this.value); 
    } 
} 

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

Вот мой код подсказки:

tooltip: { 
    enabled:true, 
    shared: true, 
    formatter:function(){ 
    var s = '<b>'+ this.x +'</b>'; 
    $.each(this.points, function(i, point) { 
     s += '<br/>'+ point.series.name +': '+secondsTimeSpanToHMS(point.y); 
    }); 
    return s; 
    } 
} 

Проблема заключается в моих десятичных сериях преобразуются в ГМС. Я не знаю, как выбрать только несколько серий и отформатировать их, и пусть другие серии отображаются так, как они написаны в моей серии.

Вот скрипка, которую я использовал. Серии 1,2,3,4,5 являются часовыми, а C1, C2 являются десятичными.

http://jsfiddle.net/wrnk/JdktQ/

ответ

1

Вы можете указать пользовательский объект в данных вашей серии, такие как: (обратите внимание mytype это только пример, это может быть partyTime или что-нибудь еще в этом отношении)

{ 
      name: '5', 
      type: 'column', 
      yAxis: 1, 
      data: [17211, 22057, 18981, 16758, 2429] 
     }, { 
      name: 'C1', 
      data: [10.69, 10.1, 9.79, 11.42, 14.61], 
      color: '#000000', 
      mytype: 'decimal' //<---- Here 
     }, { 
      name: 'C2', 
      data: [4.11, 3.88, 3.77, 4.2, 4.55], 
      color: '#000000', 
      mytype: 'decimal' //<---- Here 
     } 

, а затем тест на том, что в вашем форматировщике:

$.each(this.points, function (i, point) { 
        var mytype = point.series.userOptions.mytype; 
        console.log(mytype); 
        if (mytype == 'decimal') { 
         s += '<br/>' + point.series.name + ': ' + point.y; 
        } else { 
         s += '<br/>' + point.series.name + ': ' + secondsTimeSpanToHMS(point.y); 
        } 
       }); 

Работа демо здесь: http://jsfiddle.net/robschmuecker/3fTCq/

+0

Не думал об этом настройке ... Спасибо! – Aknorw

Смежные вопросы