Highstock: DataGrouping & Approximation (среднее значение) по значениям метки времени

Группирование данных для данных серии временных меток неверно при нажатии на пользовательскую кнопку недели. Как настроить его на неделю/месяц, 3 месяца и 6 месяцев группировки, так что среднее будет правильным. Данные для текущего и предыдущего года верны, проблема заключается в среднем времени разрешения и среднем времени отклика, когда данные на вершине инструмента и оси y находятся в формате дней: часы и часы: минуты соответственно. Это временная метка преобразуется в дни: часы и часы: минуты, но когда дело доходит до расчета среднего значения, для этого необходимо настроить правильное среднее время. Как настроить его таким образом, чтобы он применялся к среднему времени отклика и среднему времени разрешения, так что расчеты по умолчанию для текущего и предыдущего года остаются неизменными, что работает прямо сейчас.Highstock: DataGrouping & Approximation (среднее значение) по значениям метки времени

Самое главное, как настроить код для вычисления среднего значения времени. Вот рабочая скрипку: https://jsfiddle.net/aveohsdr/1/

var seriesOptions = []; 
$(function() { 
var html = ''; 
var groupingButtons = { 
    "Day": "day", 
    "Week": "week" 
}; 
for (var i in groupingButtons) { 
    html += '<button class="btn btn-default dateWiseCriteria" data-criteria="' + groupingButtons[i] + '">' + i + '</button>'; 
} 

$('.dateWiseCriteriaContainer').html(html); 
var options = {}; 
$.extend(options, { 
    units: [ 
     ['day', [1]] 
    ] 
}); 
drawAnalyticalStockChart(getSeries(), options); 
$(document).on('click', '.dateWiseCriteria', function() { 
    var options = {}; 
    var criteria = $(this).data('criteria') == 'quater' ? 'month' : $(this).data('criteria'); 
    criteria = $(this).data('criteria') == 'half' ? 'month' : criteria; 
    var value = $(this).data('criteria') == 'quater' ? 3 : 1; 
    value = $(this).data('criteria') == 'half' ? 6 : value; 
    $.extend(options, { 
     units: [ 
      [criteria, [value]] 
     ] 
    }); 
    drawAnalyticalStockChart(getSeries(), options); 
}); 
}); 

function drawAnalyticalStockChart(series, options) { 
Highcharts.stockChart('container', { 
    chart: { 
     zoomType: 'x' 
    }, 
    credits: { 
     enabled: false 
    }, 
    rangeSelector: { 
     selected: 4 
    }, 

    legend: { 
     enabled: true 
    }, 

    scrollbar: { 
     showFull: false 
    }, 

    xAxis: [{ 
     crosshair: true, 
    }], 

    yAxis: [{ // Primary yAxis 
     type: 'datetime', 
     dateTimeLabelFormats: { //force all formats to be hour:minute:second 
      second: '%H:%M:%S', 
      minute: '%H:%M:%S', 
      hour: '%H:%M:%S', 
      day: '%H:%M:%S', 
      week: '%H:%M:%S', 
      month: '%H:%M:%S', 
      year: '%H:%M:%S' 
     }, 
     labels: { 
      formatter: function() { 
       //get the timestamp 
       var time = this.value; 
       return _format_date(time, 1); 
       //now manipulate the timestamp as you wan using data functions 
      }, 
      style: { 
       color: Highcharts.getOptions().colors[2] 
      }, 
      x: 42 
     }, 
     title: { 
      text: 'Average Resolution Time', 
      style: { 
       color: Highcharts.getOptions().colors[2] 
      }, 
      margin: 53 
     }, 
     opposite: true 

    }, { // Secondary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Cases', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     labels: { 
      format: '{value} Cases', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     allowDecimals: false, 
     opposite: false 

    }, { // Tertiary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Average Response Time', 
      style: { 
       color: Highcharts.getOptions().colors[3] 
      } 
     }, 
     labels: { 
      formatter: function() { 
       //get the timestamp 
       var time = this.value; 
       return _format_date(time, 0, 1); 
       //now manipulate the timestamp as you wan using data functions 
      }, 
      style: { 
       color: Highcharts.getOptions().colors[3] 
      } 
     }, 
     type: 'datetime', 
     dateTimeLabelFormats: { //force all formats to be hour:minute:second 
      second: '%H:%M:%S', 
      minute: '%H:%M:%S', 
      hour: '%H:%M:%S', 
      day: '%H:%M:%S', 
      week: '%H:%M:%S', 
      month: '%H:%M:%S', 
      year: '%H:%M:%S' 
     }, 
    }], 
    tooltip: { 
     formatter: function() { 
      var points = this.points; 
      var groupingFormat = points[0].series.options.dataGrouping.dateTimeLabelFormats[points[0].series.currentDataGrouping.unitName][0]; 
      var headerFormat = '<span style="font-size: 10px">' + Highcharts.dateFormat(groupingFormat, this.x) + '</span><br/>'; 

      var pointFormat = '', 
       previousYear; 

      var isAllPointsHaveData = []; 
      points.forEach(function(point) { 
       if (point.y > 0) { 
        isAllPointsHaveData.push(1); 
       } 
      }); 

      points.forEach(function(point) { 
       var name = point.series.name, 
        part; 
       var finalValue = point.y; 
       var showOnTooltip = true; 
       if (name === 'Current Year') { 
        previousYear = part = new Date(point.x).getFullYear(); 
       } else if (name === 'Previous Year') { 
        part = new Date(point.x).getFullYear() - 1 
       } else if (name === 'Average Response Time') { 
        finalValue = _format_date(point.y, 0, 1, 1); 
        part = name + ' (' + previousYear + ')'; 
       } else { 
        finalValue = _format_date(point.y, 1, 1); 
        part = name + ' (' + previousYear + ')'; 
       } 
       if (!$.isEmptyObject(isAllPointsHaveData)) { 
        pointFormat += '<span style="color:' + point.color + '">\u25CF</span> <p style="color:' + point.color + '">' + part + '</p>: <b>' + finalValue + ' ' + point.series.tooltipOptions.valueSuffix + '</b><br/>'; 
       } 
      }); 
      return headerFormat + pointFormat; 
     }, 
    }, 
    plotOptions: { 
     series: { 
      showInNavigator: true, 
      dataGrouping: { 
       dateTimeLabelFormats: { 
        millisecond: ['%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'], 
        second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'], 
        minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'], 
        hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'], 
        day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'], 
        week: ['Week from %A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'], 
        month: ['%B %Y', '%B', '-%B %Y'], 
        year: ['%Y', '%Y', '-%Y'] 
       }, 
       enabled: true, 
       forced: true, 
       units: options.units, 
       smoothed: true, 
      } 
     } 
    }, 

    series: getSeries() 
}); 
} 
function getSeries() { 
seriesOptions = [{ 
    name: 'Previous Year', 
    type: 'column', 
    yAxis: 1, 
    tooltip: { 
     valueSuffix: ' Case(s)', 
    }, 
    data: [ /* Dec 2010 */ 
     [ 
      1480550400000, 
      0 
     ], 
     [ 
      1480636800000, 
      0 
     ], 
     [ 
      1480723200000, 
      0 
     ], 
     [ 
      1480809600000, 
      0 
     ], 
     [ 
      1480896000000, 
      0 
     ], 
     [ 
      1480982400000, 
      0 
     ], 
     [ 
      1481068800000, 
      0 
     ], 
     [ 
      1481155200000, 
      0 
     ], 
     [ 
      1481241600000, 
      0 
     ], 
     [ 
      1481328000000, 
      0 
     ], 
     [ 
      1481414400000, 
      0 
     ], 
     [ 
      1481500800000, 
      0 
     ], 
     [ 
      1481587200000, 
      0 
     ], 
     [ 
      1481673600000, 
      3 
     ], 
     [ 
      1481760000000, 
      0 
     ], 
     [ 
      1481846400000, 
      0 
     ], 
     [ 
      1481932800000, 
      0 
     ], 
     [ 
      1482019200000, 
      0 
     ], 
     [ 
      1482105600000, 
      0 
     ], 
     [ 
      1482192000000, 
      2 
     ], 
     [ 
      1482278400000, 
      0 
     ], 
     [ 
      1482364800000, 
      0 
     ], 
     [ 
      1482451200000, 
      0 
     ], 
     [ 
      1482537600000, 
      0 
     ], 
     [ 
      1482624000000, 
      0 
     ], 
     [ 
      1482710400000, 
      0 
     ], 
     [ 
      1482796800000, 
      0 
     ], 
     [ 
      1482883200000, 
      0 
     ], 
     [ 
      1482969600000, 
      0 
     ], 
     [ 
      1483056000000, 
      2 
     ], 
     [ 
      1483142400000, 
      0 
     ] 
    ], 
    "dataGrouping": { 
     "approximation": "sum" 
    }, 
    "color": "#8085E9" 
}, { 
    name: 'Current Year', 
    type: 'column', 
    yAxis: 1, 
    tooltip: { 
     valueSuffix: ' Case(s)', 
    }, 
    data: [ /* Dec 2010 */ 
     [ 
      1480550400000, 
      0 
     ], 
     [ 
      1480636800000, 
      0 
     ], 
     [ 
      1480723200000, 
      0 
     ], 
     [ 
      1480809600000, 
      0 
     ], 
     [ 
      1480896000000, 
      0 
     ], 
     [ 
      1480982400000, 
      0 
     ], 
     [ 
      1481068800000, 
      0 
     ], 
     [ 
      1481155200000, 
      0 
     ], 
     [ 
      1481241600000, 
      0 
     ], 
     [ 
      1481328000000, 
      0 
     ], 
     [ 
      1481414400000, 
      0 
     ], 
     [ 
      1481500800000, 
      0 
     ], 
     [ 
      1481587200000, 
      0 
     ], 
     [ 
      1481673600000, 
      0 
     ], 
     [ 
      1481760000000, 
      0 
     ], 
     [ 
      1481846400000, 
      0 
     ], 
     [ 
      1481932800000, 
      0 
     ], 
     [ 
      1482019200000, 
      0 
     ], 
     [ 
      1482105600000, 
      1 
     ], 
     [ 
      1482192000000, 
      0 
     ], 
     [ 
      1482278400000, 
      0 
     ], 
     [ 
      1482364800000, 
      7 
     ], 
     [ 
      1482451200000, 
      0 
     ], 
     [ 
      1482537600000, 
      0 
     ], 
     [ 
      1482624000000, 
      0 
     ], 
     [ 
      1482710400000, 
      0 
     ], 
     [ 
      1482796800000, 
      0 
     ], 
     [ 
      1482883200000, 
      0 
     ], 
     [ 
      1482969600000, 
      0 
     ], 
     [ 
      1483056000000, 
      1 
     ], 
     [ 
      1483142400000, 
      0 
     ] 
    ], 
    "dataGrouping": { 
     "approximation": "sum" 
    }, 
    "color": "#F45B5B" 
}, { 
    name: 'Average Response Time', 
    type: 'spline', 
    yAxis: 2, 
    tooltip: { 
     valueSuffix: '', 
    }, 
    data: [ /* Dec 2010 */ 
     [ 
      1480550400000, 
      0 
     ], 
     [ 
      1480636800000, 
      0 
     ], 
     [ 
      1480723200000, 
      0 
     ], 
     [ 
      1480809600000, 
      0 
     ], 
     [ 
      1480896000000, 
      0 
     ], 
     [ 
      1480982400000, 
      0 
     ], 
     [ 
      1481068800000, 
      0 
     ], 
     [ 
      1481155200000, 
      0 
     ], 
     [ 
      1481241600000, 
      0 
     ], 
     [ 
      1481328000000, 
      0 
     ], 
     [ 
      1481414400000, 
      0 
     ], 
     [ 
      1481500800000, 
      0 
     ], 
     [ 
      1481587200000, 
      0 
     ], 
     [ 
      1481673600000, 
      0 
     ], 
     [ 
      1481760000000, 
      0 
     ], 
     [ 
      1481846400000, 
      0 
     ], 
     [ 
      1481932800000, 
      0 
     ], 
     [ 
      1482019200000, 
      0 
     ], 
     [ 
      1482105600000, 
      2760 
     ], 
     [ 
      1482192000000, 
      0 
     ], 
     [ 
      1482278400000, 
      0 
     ], 
     [ 
      1482364800000, 
      1140 
     ], 
     [ 
      1482451200000, 
      0 
     ], 
     [ 
      1482537600000, 
      0 
     ], 
     [ 
      1482624000000, 
      0 
     ], 
     [ 
      1482710400000, 
      0 
     ], 
     [ 
      1482796800000, 
      0 
     ], 
     [ 
      1482883200000, 
      0 
     ], 
     [ 
      1482969600000, 
      0 
     ], 
     [ 
      1483056000000, 
      192060 
     ], 
     [ 
      1483142400000, 
      0 
     ] 
    ], 
    "dataGrouping": { 
     "approximation": "average" 
    }, 
    "color": "#8BA6C7" 
}, { 
    name: 'Average Resolution Time', 
    type: 'spline', 
    yAxis: 0, 
    tooltip: { 
     valueSuffix: '', 
    }, 
    data: [ /* Dec 2010 */ 
     [ 
      1480550400000, 
      0 
     ], 
     [ 
      1480636800000, 
      0 
     ], 
     [ 
      1480723200000, 
      0 
     ], 
     [ 
      1480809600000, 
      0 
     ], 
     [ 
      1480896000000, 
      0 
     ], 
     [ 
      1480982400000, 
      0 
     ], 
     [ 
      1481068800000, 
      0 
     ], 
     [ 
      1481155200000, 
      0 
     ], 
     [ 
      1481241600000, 
      0 
     ], 
     [ 
      1481328000000, 
      0 
     ], 
     [ 
      1481414400000, 
      0 
     ], 
     [ 
      1481500800000, 
      0 
     ], 
     [ 
      1481587200000, 
      0 
     ], 
     [ 
      1481673600000, 
      0 
     ], 
     [ 
      1481760000000, 
      0 
     ], 
     [ 
      1481846400000, 
      0 
     ], 
     [ 
      1481932800000, 
      0 
     ], 
     [ 
      1482019200000, 
      0 
     ], 
     [ 
      1482105600000, 
      428400 
     ], 
     [ 
      1482192000000, 
      0 
     ], 
     [ 
      1482278400000, 
      0 
     ], 
     [ 
      1482364800000, 
      273600 
     ], 
     [ 
      1482451200000, 
      0 
     ], 
     [ 
      1482537600000, 
      0 
     ], 
     [ 
      1482624000000, 
      0 
     ], 
     [ 
      1482710400000, 
      0 
     ], 
     [ 
      1482796800000, 
      0 
     ], 
     [ 
      1482883200000, 
      0 
     ], 
     [ 
      1482969600000, 
      0 
     ], 
     [ 
      1483056000000, 
      360000 
     ], 
     [ 
      1483142400000, 
      0 
     ] 
    ], 
    "dataGrouping": { 
     "approximation": "average" 
    }, 
    "color": "#8D4654" 
}]; 
return seriesOptions; 
} 
function _format_date(ts, d = 0, h = 0, m = 0) { 
var date_now = 0; 
var label = ''; 
var date_future = ts * 1000; 

// get total seconds between the times 
var delta = Math.abs(date_future - date_now)/1000; 

// calculate (and subtract) whole days 
var days = Math.floor(delta/86400); 
var finalValue = ''; 
if (d) { 
    label = days > 1 ? ' days ' : ' day '; 
    finalValue += days + label; 
} 

delta -= days * 86400; 

// calculate (and subtract) whole hours 
var hours = Math.floor(delta/3600) % 24; 
if (h) { 
    if (d == 0) { 
     var totalHours = hours + (days * 24); 
     label = totalHours > 1 ? ' hours ' : ' hour '; 
     finalValue += totalHours + label; 
    } else { 
     label = hours > 1 ? ' hours ' : ' hour '; 
     finalValue += hours + label; 
    } 
} 

// calculate (and subtract) whole minutes 
var minutes = Math.floor(delta/60) % 60; 
delta -= minutes * 60; 

if (m) { 
    label = minutes > 1 ? ' minutes ' : ' minute '; 
    finalValue += minutes + label; 
} 

return finalValue; 
}

источник

2017-01-09 Vipul

Можете привести несколько примеров, каков должен быть правильный вывод/как должна выглядеть всплывающая подсказка? – morganfree

@morganfree Мне нужно реализовать собственный метод для вычисления среднего значения времени разрешения, я могу заставить его работать, вы можете проверить обновленную скрипту: https://jsfiddle.net/aveohsdr/4/, но если функция масштабирования график его ломается, а средняя временная линия разрешения равна нулю и прямо во все времена, в противном случае она работает нормально. Не могли бы вы проверить, почему это происходит при масштабировании, мне тоже нужно реализовать то же самое при масштабировании, но как, если моя текущая реализация неверна, пожалуйста, исправьте меня и в этом. – Vipul

@morganfree Формула: c1 (t1) + c2 (t2)/c1 + c2, где c1 и c2 - значения из второго бара, который является баром текущего года, а t1 и t2 - значениями от времени разрешения в определенные даты. – Vipul

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

 var averageTime = this.options.data.slice(this.dataGroupInfo.start + this.cropStart, this.dataGroupInfo.start + this.cropStart + this.dataGroupInfo.length); 
     var currentYear = seriesOptions[1].data.slice(this.dataGroupInfo.start + this.cropStart, this.dataGroupInfo.start + this.cropStart + this.dataGroupInfo.length) 
     var len = arr.length; 
     var seconds = [], cases = []; 
     var finalArrayWithData = []; 

     for(var i in averageTime) { 
      if(averageTime[i][1] > 0) { 
       var date = _format_date(averageTime[i][1], 1, 1, 1, true); 
       seconds.push((((date.d * 24) * 60) * 60) + ((date.h * 60) * 60) + (date.m * 60)); 
       cases.push(currentYear[i][1]); 
       finalArrayWithData['s'] = seconds; 
       finalArrayWithData['cases'] = cases; 
      } 
     } 
     var sumTopS = 0; 
     var sumBottom = 0; 

     for (var i in finalArrayWithData['cases']) { 
      if(finalArrayWithData['s'][i] > 0) { 
       sumTopS += finalArrayWithData['cases'][i] * finalArrayWithData['s'][i]; 
       sumBottom += finalArrayWithData['cases'][i]; 
      } 
     } 

     var averageS = 0; 
     if ($.isNumeric(sumTopS) && sumBottom) { 
      averageS = Math.round(sumTopS/sumBottom); 
     } 

     _dts = Date.UTC(1970, 0, 1, 0, 0, averageS)/1000; 
     return _dts;

Но я все же верю, что должен быть какой-то прямой способ сделать это. Я должен сделать трюк, чтобы получить данные из разных источников. Они могут быть доступны из другой легкодоступной переменной.

источник

2017-01-10 12:37:27 Vipul

Highstock: DataGrouping & Approximation (среднее значение) по значениям метки времени

ответ

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