2016-04-01 2 views
0

На следующем JS FiddleHighchart шага график подсказка показать старые данные, когда нет данных

Я создал таблицу с шагом линией.

step: true 

Я пытаюсь показать старые данные в подсказке, когда нет данных для серии. Например. на мыши над 1 июля 2015 года, у меня есть данные, поэтому всплывающая подсказка показывает данные. Но если вы переместите forwared, всплывающая подсказка ничего не проявит.

Является ли поддержка HighChart чем-то вроде отображения последних старых данных, если данных нет.

+0

Подводя итог, если вы выделите i.e последнюю точку синей серии, вы также хотите напечатать последнюю точку из черной серии, это правильно? –

+0

No. Для серии Blue у меня есть данные. Для черной серии у меня нет данных. Поэтому только для черной серии я хочу напечатать последнюю точку, поскольку это шаг. Синяя линия не является строкой. – Kamran

+0

Ну, это немного неясно. Когда вы наведете синий сингл и черный, вы напечатаете два значения. Это верно. Когда вы наведите курсор на синюю серию, где нет черной точки ниже (нет значения), тогда она должна отображаться последним черным. Правильно или нет? –

ответ

0

Вы должны использовать tooltip.formatter, а затем использовать цикл для поиска точек с тем же x. Если не существует, то извлекайте последнюю точку из серии шагов. Простая демонстрация: http://jsfiddle.net/vs6scfch.

tooltip: { 
    shared: false, 
    formatter: function() { 
    var x = this.x, 
      series = this.series.chart.series, 
     stepSeries = series[1], 
     lastPointStepSerie = stepSeries.points[stepSeries.points.length - 1], 
      each = Highcharts.each, 
     txt = '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b %d, %Y', this.x) + '</span><br/>'; 

    each(series, function(s,i) { 
     each(s.points, function(p, j) { 
     if(p.x === x) { 
      txt += '<span style="color:' + p.color + '">\u25CF</span> ' + s.name + ': <b>' + p.y + '</b><br/>' 
     } 
     }); 
    }); 

    if(x > lastPointStepSerie.x) { 
     txt += '<span style="color:' + lastPointStepSerie.color + '">\u25CF</span> ' + stepSeries.name + ': <b>' + lastPointStepSerie.y + '</b><br/>' 
    } 

    return txt; 
    } 
},