javascript - 无法在 Highcharts 中的 x 轴上显示日期

Question

我想在 x asis 中显示日期，但无法显示。在图表中显示类似 00.00.00.100 的值。无法在 javascript 中将 1577844000000 转换为正确的日期、月份、年份，以便使用 highcharts 中的 dateTimeLabelFormats 在 x 轴上显示。如何使用刻度以及如何在图表中显示它。 刻度值像这样在控制台中打印。 样本报价数据

    1577844000000
    1577843100000
    1577842200000
    1577841300000
    15778404000

响应中的示例数据

DeviceTimeStamp: "2020-01-10T00:30:00"

代码

  getalldata();

                    function getalldata() {
                        var xhttp_roomlogs = new XMLHttpRequest();
                        xhttp_roomlogs.onreadystatechange = function () {
                            if (this.readyState == 4 && this.status == 200) {
                                var response = JSON.parse(xhttp_roomlogs.responseText);

                                 var Ch1Temp = [];
                                 var Ch2Temp = [];

                        $(response).each(function (i, item) {
                            var date = UtcToIst(item.DeviceTimeStamp);
                            var ticks = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
                            Ch1Temp.push([ticks, item.Ch1Temp])
                            Ch2Temp.push([ticks, item.Ch2Temp])//
                        });

                        $('#container').empty();
                                var labels = response.map(function (e) {
                                    var roomtempdata = e.Ch1Temp;
                                    return parseFloat(roomtempdata);
                                })
                                var ch2temp = response.map(function (e) {
                                    var roomtempdata = e.Ch2Temp;
                                    return parseFloat(roomtempdata);
                                })

                                Highcharts.chart('container', {
                                    credits: {
                                        enabled: false
                                    },
                                    title: {
                                        text: 'Chamber 1 & 2 Temp'
                                    },

                                    subtitle: {
                                        text: 'in Degree Celcius'
                                    },
                                    xAxis: {
                                        type: 'datetime',
                                        dateTimeLabelFormats: { // don't display the dummy year
                                        month: '%e. %b',
                                        year: '%b'
                                },
                                title: {
                                    text: 'Date'
                                }
                                    },
                                    yAxis: {
                                        title: {
                                            text: 'Temperature'
                                        }
                                    },
                                    legend: {
                                        layout: 'vertical',
                                        align: 'right',
                                        verticalAlign: 'middle'
                                    },

                                    //y co-ordinates
                                    series: [{
                                        name: 'Chamber 1 Temp',
                                        data: labels
                                    },
                                    {
                                        name: 'Chamber 2 Temp',
                                        data: ch2temp
                                    }


                                    ],
                                    responsive: {
                                        rules: [{
                                            condition: {
                                                maxWidth: 500
                                            },
                                            chartOptions: {
                                                legend: {
                                                    layout: 'horizontal',
                                                    align: 'center',
                                                    verticalAlign: 'bottom'
                                                }
                                            }
                                        }]
                                    }

                                });

                                //highcharts end
                            }
                        };

                        xhttp_roomlogs.open("GET", "/api/data", true);

                     xhttp_roomlogs.send();
                    }

                    function UtcToIst(data) {
                        var dt = new Date(data);
                        return dt;
                    }

Answer 1

您可以使用以下方法转换 json 日期:

var jsonDate = "\/Date(1577844000000)\/".substr(6);
var dateObject = new Date(parseInt(jsonDate ));
var stringDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
console.log("Dat Object:" + dateObject);
console.log("String Date:" + stringDate);

示例 hightchart 代码:

Highcharts.chart('container', {
    chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['1/1/2020', '1/2/2020', '1/3/2020', '1/4/2020', '1/5/2020']
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        legend: {
            labelFormatter: function () {
                if(this.data.length > 0) {
			        return this.data[0].category;
                } else {
                    return this.name;
                }
		    }
        },
        series: [{
            data: [{x:0,y:1}],
            name: '1/1/2020'
        },{
            data: [{x:1,y:1}],
            name: '1/2/2020'
        },{
            data: [{x:2,y:1}],
            name: '1/3/2020'
        },{
            data: [{x:3,y:1}],
            name: '1/4/2020'
        },{
            data: [{x:4,y:1}],
            name: '1/5/2020'
        }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>