Javascript 在xaxis中显示错误月份值的高位图表

问题描述：尝试在xAxis中显示月-年值，例如“2016年1月”到“2016年12月”。 我在$scope.chartxAxisData对象中有相同的值，但在xAxis中格式化后显示此值时，它将从'2015年12月'开始显示到'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
    }]
};

/$scope.chartxAxisData数据如下
//时间价值
//$scope.chartxAxisData=[145158600000、1454265000000、1456770600000、1459449000000、14620400000、14641940001467114000014699989800000、1472668200000、1475260200000、1477938600000、1480530600000]；
//日期价值
//[2016年1月1日星期五00:00:00 GMT+0530（印度标准时间）、2016年2月1日星期一00:00 GMT+0530（印度标准时间）、2016年3月1日星期二00:00 GMT+0530（印度标准时间）、2016年4月1日星期五00:00 GMT+0530（印度标准时间）、2016年5月1日太阳00:00 GMT+0530（印度标准时间）、2016年6月1日星期三00:00 GMT+0530（印度标准时间），2016年7月1日星期五00:00:00 GMT+0530（印度标准时间），2016年8月1日星期一00:00 GMT+0530（印度标准时间），2016年9月1日星期四00:00 GMT+0530（印度标准时间），2016年10月1日星期六00:00 GMT+0530（印度标准时间），2016年11月1日星期二00:00 GMT+0530（印度标准时间），2016年12月1日星期四00:00 GMT+0530（印度标准时间）]
var axisLabelFormatter=函数（self，serieData2）{
var label=Highcharts.dateFormat（“%b%Y”，serieData2[self.value]）；
退货标签；
};
$scope.chartData={
图表：{
类型：“列”
},
标题：{
文本：“”
},
时间：{
useUTC:false
},
xAxis：{
键入：“日期时间”，
标签：{
格式化程序：函数（）{
返回axisLabelFormatter（此$scope.ChartXaxAsData）；
},
风格：{
方家：“Verdana，无衬线，咏叹调”，
尺寸：13
},
溢出：false
},
分:0,，
最大值：$scope.chartxAxisData.length-1
},
亚克斯：{
分:0,，
标题：{
正文：“ADR”，
风格：{
字体大小：“20px”
}
},
标签：{
格式化程序：函数（）{
返回$scope.kpiprefix+this.axis.defaultLabelFormatter.call（this）；
}
}
},
工具提示：{
headerFormat:“{point.key}”，
pointFormat:“+$scope.kpiprefix+'{point.y:.1f}'，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
专栏：{
点填充：0.1，
边框宽度：0
},
系列：{
颜色：“#a3ca5f”
}
},
系列：[{
showInLegend:false，
名称：'系列'，
数据：$scope.chartSeriesData
}]
};

输出

---

它应该从2016年1月开始

您的时间超出范围，因为您面临时区问题，解析器可能会将long解析到不同的时区，从而生成上个月的时间。您应该将此功能应用于图表。它是一个全局函数，用于设置所有图形的时区

Highcharts.setOptions({
    time: {
        timezone: 'Asia/Kolkata'
    }
});

或者，替换

时间：{useUTC:false}

在highcharts代码中，您已经发布了此代码，以便在本地更改它

此外，为了使其工作，还应该导入一些

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中查找有关时间的更多信息