Highstock：时间戳值的数据分组和近似（平均）
Highstock: DataGrouping & Approximation (average) on timestamp values
单击自定义周按钮时，时间戳系列数据的数据分组不正确。如何针对周/月、3 个月和 6 个月的分组对其进行自定义，以便平均值是正确的。当前和上一年的数据是正确的，问题在于平均解决时间和平均响应时间，其中工具提示和 y 轴上的数据分别采用 days:hours 和 hours:minutes 格式。那就是时间戳被转换成 days:hours 和 hours:minutes，但是当计算它的平均值时，需要定制来计算正确的平均时间。如何以某种方式对其进行自定义，以便将其应用于平均响应时间和平均解决时间，以便当前和上一年的默认计算保持不变，目前正在运行。
最重要的是如何自定义代码以计算时间戳值的平均值。这是工作 fiddle：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;
}
我已经通过如下修改近似方法解决了这个问题，它似乎在所有情况下都工作正常，包括缩放和滚动。
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;
但我仍然相信一定有一些直接的方法可以做到这一点。我必须耍花招才能从各种来源获取数据。它们可能可以从其他一些易于访问的变量中获得。
单击自定义周按钮时，时间戳系列数据的数据分组不正确。如何针对周/月、3 个月和 6 个月的分组对其进行自定义，以便平均值是正确的。当前和上一年的数据是正确的，问题在于平均解决时间和平均响应时间，其中工具提示和 y 轴上的数据分别采用 days:hours 和 hours:minutes 格式。那就是时间戳被转换成 days:hours 和 hours:minutes，但是当计算它的平均值时，需要定制来计算正确的平均时间。如何以某种方式对其进行自定义，以便将其应用于平均响应时间和平均解决时间，以便当前和上一年的默认计算保持不变，目前正在运行。
最重要的是如何自定义代码以计算时间戳值的平均值。这是工作 fiddle：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;
}
我已经通过如下修改近似方法解决了这个问题，它似乎在所有情况下都工作正常，包括缩放和滚动。
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;
但我仍然相信一定有一些直接的方法可以做到这一点。我必须耍花招才能从各种来源获取数据。它们可能可以从其他一些易于访问的变量中获得。