Highstock: DataGrouping & Approximation (Durchschnitt) für Zeitstempelwerte

Question

Die Datengruppierung für Zeitreihendaten ist nicht korrekt, wenn auf die Schaltfläche für benutzerdefinierte Woche geklickt wird. Wie man es für die Woche/Monat, 3 Monate und 6 Monate Gruppierung so anpassen, dass der Durchschnitt korrekt sein wird. Die Daten für das aktuelle und das vorherige Jahr sind korrekt, das Problem liegt bei der durchschnittlichen Auflösungszeit und der durchschnittlichen Antwortzeit, wobei die Daten auf der Werkzeugspitze und der y-Achse in einem Format Tage: Stunden bzw. Stunden: Minuten sind. Das heißt, der Zeitstempel wird in Tage umgewandelt: Stunden und Stunden: Minuten, aber wenn es darum geht, den Durchschnitt zu berechnen, ist eine Anpassung erforderlich, um den richtigen Durchschnitt der Zeit zu berechnen. Wie wird es so angepasst, dass es auf die durchschnittliche Antwortzeit und die durchschnittliche Lösungszeit angewendet wird, so dass die Standardberechnungen für das aktuelle und das vorherige Jahr gleich bleiben, was gerade funktioniert.

Am wichtigsten, wie Sie den Code anpassen, um den Durchschnitt der Zeitstempelwerte zu berechnen. Hier ist die Arbeits Geige: 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; 
} 

Answer 1

ich es wie unten durch Modifizieren Approximationsmethode gelöst haben, und es scheint, in allen Fällen, einschließlich Zoom und Scrollen zu funktionieren.

 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; 

Aber ich glaube immer noch, dass es einen direkten Weg geben muss. Ich muss einen Trick machen, um Daten aus verschiedenen Quellen zu bekommen. Sie können von einer anderen leicht zugänglichen Variable verfügbar sein.