UTC编号以高图显示在xAxis上

时间:2018-06-29 10:01:29

标签: javascript highcharts

这是我的代码: 在输出中,我得到的是UTC时间戳号而不是日期值。我搜索了一下,发现在xAxis上显示时间值需要'datetime'类型。但对于我来说,它不起作用。

this.partnerChart = function () {
        chart = new Highcharts.chart({
            chart: {
                type: 'line',
                renderTo: 'partnerChart',
                events: {
                    load: self.requestPartnerChartData
                },
                zoomType: 'xy',
                resetZoomButton: {
                    position: {
                         align: 'right', // by default
                         verticalAlign: 'top' // by default
                    }
                }
            },
            title: {
                text: self.selectedXAxis() + ' Statistics'
            },
            xAxis: {
                type: 'datetime', 
                categories: []
            },
            yAxis: {
                min: 0
            },
            plotOptions: {
                series: {
                    connectNulls: true
                }
            },
            legend: {
                shadow: false
            },
            tooltip: {
                shared: true
            },
            plotOptions: {
                column: {
                    grouping: false,
                    shadow: false,
                    borderWidth: 0
                }
            }
        })
    };

这是我的ajax调用:

             $.ajax({
                url: "#",
                type: "GET",
                contentType: "application/json", 
                success: function (data) {
                    chart.yAxis[0].setTitle({ text: self.selectedYAxisLeft() });
                    var dateCost;
                    var dateString = data.slice(data.indexOf('{') + 1, data.lastIndexOf('}'));
                    var rawSaleData = dateString.split(',');
                    var sales = [];

                    chart.update({
                        xAxis: {
                            dateTimeLabelFormats: {
                                month: '%e. %b',
                                year: '%b'
                            },
                            title: {
                                text: 'Date'
                            },
                            min: 1483228800000
                        },
                        tooltip: {
                            headerFormat: '<b>{series.name}</b><br>',
                            pointFormat: '{point.x:%e %b}: {point.y:.2f} '
                        }
                    });

                    for(var i = 0; i < rawSaleData.length; i++){
                        if(i != 0){
                            rawSaleData[i] = rawSaleData[i].slice(1);
                        }
                        dateCost = rawSaleData[i].split('=');
                        dateCost[0] = dateCost[0].slice(0,dateCost[0].indexOf(' '));
                        var components = dateCost[0].split('-');

                        var utcDate = Date.UTC(components[0],components[1] - 1,components[2]);

                        sales.push([utcDate, parseInt(dateCost[1])]);                           
                    }

                    chart.addSeries({
                        name: 'Sales',
                        data: sales
                    });                         
                }
            })

可变销售系列中的数据具有以下形式的数据: [[utc时间戳,值],[utc时间戳,值]]。请帮忙。谢谢enter image description here

1 个答案:

答案 0 :(得分:1)

删除categories: []。您同时设置了type: "datetime"和类别。