javascript - 无法在高位图表中显示带有 {hh:mm} 的 datetimelabel 格式的 x 轴数据

Question

我想以 hh:mm 的形式显示 x 轴数据，例如 10:00、12:00、14:00，但我得到类似 Fri Feb 14 2020 08:50:57 GMT+0530（印度标准时间）的信息，我希望这应该是 08:57，我想以小时和分钟格式显示数据。

样本数据 2020 年 2 月 14 日星期五 08:50:57 GMT+0530（印度标准时间）

代码

function getdata() {
            $.ajax
                ({
                    type: "GET",
                    url: "url",
                    dataType: 'json',
                    headers: {
                        'Authorization': "Basic YWRtaW46YWRtaW5AMTIz"
                    },
                    data: '{}',
                    success: function (data) {
                        var disolved_oxygen = data.map(function (data) {
                            var disolvedoxy = data.do;
                            return parseInt(disolvedoxy);
                        }
                        )

                        var ph = data.map(function (data) {
                            var phvalue = data.ph;
                            return parseInt(phvalue);
                        }

                        )
                        var xdata = data.map(function (data) {
                            return (UtcToIst(data.timestatmp));
                        }
                        )
                        Highcharts.chart('container', {
                            credits: {
                                enabled: false
                            },
                            title: {
                                text: 'Central'
                            },

                            subtitle: {
                                text: 'Device Id: 1'
                            },

                            yAxis: {
                                title: {
                                    text: ''
                                }
                            },

                            xAxis: {
                                tickInterval: 5,
                                type: 'datetime',
                                dateTimeLabelFormats: {
                                    day: "%e-%b-%y",
                                    month: "%b-%y"
                                },
                                categories: xdata
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',

                                verticalAlign: 'middle'
                            },

                            plotOptions: {
                                series: {
                                    label: {

                                    }
                                }
                            },
                            series: [{
                                name: 'Dissolved Oxygen(mg/L)',
                                data: disolved_oxygen
                            }, {
                                name: 'pH',
                                data: ph
                            }],

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

                        });
                    }
                });
        }

标签： javascriptjqueryhighcharts

Answer 1

您可以使用pointInterval功能来实现它。

演示：https ://jsfiddle.net/BlackLabel/r4d60avy/

代码：

  xAxis: {
    type: 'datetime'
  },

  plotOptions: {
    series: {
      pointStart: Date.UTC(2010, 0, 1),
      pointInterval: 60 * 60 * 1000 // one hour
    }
  },

API：https ://api.highcharts.com/highcharts/series.line.pointInterval