问题描述:尝试在xAxis中显示月 - 年值,例如2016年1月'到2016年12月'。 我在 $ scope.chartxAxisData 对象中具有相同的值,但在 xAxis 格式化后显示此值时,它会从' 2015年12月&#39开始显示至' 2016年11月'
//$scope.chartxAxisData Data as follow
//Value in Time
// $scope.chartxAxisData = [1451586600000, 1454265000000, 1456770600000, 1459449000000, 1462041000000, 1464719400000,1467311400000,1469989800000, 1472668200000, 1475260200000, 1477938600000, 1480530600000];
//Value in Date
//[Fri Jan 01 2016 00:00:00 GMT+0530 (India Standard Time), Mon Feb 01 2016 00:00:00 GMT+0530 (India Standard Time), Tue Mar 01 2016 00:00:00 GMT+0530 (India Standard Time), Fri Apr 01 2016 00:00:00 GMT+0530 (India Standard Time), Sun May 01 2016 00:00:00 GMT+0530 (India Standard Time), Wed Jun 01 2016 00:00:00 GMT+0530 (India Standard Time), Fri Jul 01 2016 00:00:00 GMT+0530 (India Standard Time), Mon Aug 01 2016 00:00:00 GMT+0530 (India Standard Time), Thu Sep 01 2016 00:00:00 GMT+0530 (India Standard Time), Sat Oct 01 2016 00:00:00 GMT+0530 (India Standard Time), Tue Nov 01 2016 00:00:00 GMT+0530 (India Standard Time), Thu Dec 01 2016 00:00:00 GMT+0530 (India Standard Time)]
var axisLabelFormatter = function (self, serieData2) {
var label = Highcharts.dateFormat('%b %Y', serieData2[self.value]);
return label;
};
$scope.chartData = {
chart: {
type: 'column'
},
title: {
text: ''
},
time: {
useUTC: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return axisLabelFormatter(this, $scope.chartxAxisData);
},
style: {
fonFamily: 'Verdana,sans-serif,aria',
fontSize: 13
},
overflow: false
},
min: 0,
max: $scope.chartxAxisData.length - 1
},
yAxis: {
min: 0,
title: {
text: 'ADR',
style: {
fontSize: '20px'
}
},
labels: {
formatter: function() {
return $scope.kpiprefix + this.axis.defaultLabelFormatter.call(this);
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<table><tr><td style="padding:0"><b>' + $scope.kpiprefix + '{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
},
series: {
color: '#a3ca5f'
}
},
series: [{
showInLegend: false,
name: 'series',
data: $scope.chartSeriesData
}]
};
它应该从 2016年1月开始。
答案 0 :(得分:1)
您的时间超出了范围,因为您正面临时区问题,解析器可能会将长片解析为不同的时区,导致上个月的时间。您应该将此功能应用于图表。它是一个全局函数,用于设置所有图形的时区。
Highcharts.setOptions({
time: {
timezone: 'Asia/Kolkata'
}
});
或者,替换
time: { useUTC: false }
在你已经发布的高级代码中,在本地更改它。
此外,为了实现这一点,您还应该导入一些moment.js
库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
在Highcharts API
中查找有关时间的更多信息