Highcharts Highstock：数据分组&；时间戳值的近似值（平均值）
单击“自定义周”按钮时，时间戳序列数据的数据分组不正确。如何自定义周/月、3个月和6个月分组，以便平均值正确。当前和上一年的数据是正确的，问题在于平均解析时间和平均响应时间，其中刀尖和y轴上的数据格式分别为天：小时和小时：分钟。也就是说，时间戳被转换为天：小时和小时：分钟，但在计算其平均值时，需要进行自定义以计算正确的平均时间。如何对其进行自定义，以便将其应用于平均响应时间和平均解决时间，从而使当前和上一年的默认计算保持不变，目前正在运行 最重要的是如何自定义代码以计算时间戳的平均值。这是工作小提琴：Highcharts Highstock：数据分组&；时间戳值的近似值（平均值）,highcharts,highstock,Highcharts,Highstock,单击“自定义周”按钮时，时间戳序列数据的数据分组不正确。如何自定义周/月、3个月和6个月分组，以便平均值正确。当前和上一年的数据是正确的，问题在于平均解析时间和平均响应时间，其中刀尖和y轴上的数据格式分别为天：小时和小时：分钟。也就是说，时间戳被转换为天：小时和小时：分钟，但在计算其平均值时，需要进行自定义以计算正确的平均时间。如何对其进行自定义，以便将其应用于平均响应时间和平均解决时间，从而使当前和上一年的默认计算保持不变，目前正在运行 最重要的是如何自定义代码以计算时间戳的平均值。这是工作小
var系列选项=[]；
$（函数（）{
var html=''；
变量分组按钮={
“日”：“日”，
“周”：“周”
};
用于（分组按钮中的变量i）{
html+=''+i+''；
}
$（'.dateWiseCriteriaContainer'）.html（html）；
var选项={}；
$.extend（选项{
单位：[
[‘天’，[1]]
]
});
drawAnalyticalStockChart（getSeries（），选项）；
$（文档）.on（'单击'，'.dateWiseCriteria'，函数（）{
var选项={}；
变量标准=$（此）.data（'criteria'）=='quater'？'month'：$（此）.data（'criteria'）；
条件=$（this）.data（'criteria'）=='half'？'month'：条件；
var值=$（this）.data（'criteria'）=='quater'？3:1；
值=$（this）.data（'criteria'）=='half'？6：值；
$.extend（选项{
单位：[
[标准，[值]]
]
});
drawAnalyticalStockChart（getSeries（），选项）；
});
});
函数图AnalyticalStockChart（系列，选项）{
Highcharts.stockChart（‘容器’{
图表：{
zoomType:'x'
},
学分：{
已启用：false
},
范围选择器：{
选定：4
},
图例：{
已启用：true
},
滚动条：{
炫耀：假
},
xAxis：[{
十字准星：没错，
}],
yAxis:[{//主yAxis
键入：“日期时间”，
dateTimeLabelFormats:{//强制所有格式为小时：分钟：秒
第二个：“%H:%M:%S”，
分钟：“%H:%M:%S”，
小时数：“%H:%M:%S”，
日期：“%H:%M:%S”，
周：“%H:%M:%S”，
月份：“%H:%M:%S”，
年份：'%H:%M:%S'
},
标签：{
格式化程序：函数（）{
//获取时间戳
var时间=该值；
返回格式日期（时间，1）；
//现在，在使用数据函数时操纵时间戳
},
风格：{
颜色：Highcharts.getOptions（）.colors[2]
},
x:42
},
标题：{
文本：“平均解析时间”，
风格：{
颜色：Highcharts.getOptions（）.colors[2]
},
差额：53
},
相反：对
}，{//次雅克西
网格线宽：0，
标题：{
正文：“案例”，
风格：{
颜色：Highcharts.getOptions（）.color[0]
}
},
标签：{
格式：“{value}案例”，
风格：{
颜色：Highcharts.getOptions（）.color[0]
}
},
allowDecimals:false，
反面：错
}，{//
网格线宽：0，
标题：{
文本：“平均响应时间”，
风格：{
颜色：Highcharts.getOptions（）.colors[3]
}
},
标签：{
格式化程序：函数（）{
//获取时间戳
var时间=该值；
返回格式日期（时间，0，1）；
//现在，在使用数据函数时操纵时间戳
},
风格：{
颜色：Highcharts.getOptions（）.colors[3]
}
},
键入：“日期时间”，
dateTimeLabelFormats:{//强制所有格式为小时：分钟：秒
第二个：“%H:%M:%S”，
分钟：“%H:%M:%S”，
小时数：“%H:%M:%S”，
日期：“%H:%M:%S”，
周：“%H:%M:%S”，
月份：“%H:%M:%S”，
年份：'%H:%M:%S'
},
}],
工具提示：{
格式化程序：函数（）{
var points=这个点；
var groupingFormat=points[0]。series.options.dataGrouping.dateTimeLabelFormats[points[0]。series.currentDataGrouping.unitName][0]；
var HeadePerformat=''+Highcharts.dateFormat（groupingFormat，this.x）+'
；
var pointFormat=''，
上一年；
var isAllPointsHaveData=[]；
点。forEach（函数（点）{
如果（点y>0）{
isAllPointsWaveData.push（1）；
}
});
点。forEach（函数（点）{
变量名称=point.series.name，
部分
var最终价值=点y；
var showntooltip=true；
如果（名称=='本年度'）{
上一年=部分=新日期（第x点）。getFullYear（）；
}else if（名称==‘上一年’）{
part=新日期（point.x）.getFullYear（）-1
}else if（名称===‘平均响应时间’）{
最终值=\格式\日期（点y，0，1，1）；
部分=名称+'（'+上一年+）'；
}否则{
最终值=\格式\日期（点y，1，1）；
部分=名称+'（'+上一年+）'；
}
如果（！$.isEmptyObject（IsAllPointsWaveData））{
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;
}
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;