javascript - 无法使用日期时间标签格式显示 x 轴数据 {hh :mm} in high charts

标签 javascript jquery highcharts

我想以 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'
                                        }
                                    }
                                }]
                            }

                        });
                    }
                });
        }

最佳答案

您可以使用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

关于javascript - 无法使用日期时间标签格式显示 x 轴数据 {hh :mm} in high charts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60238032/

相关文章:

javascript - 以编程方式更改图表副标题

JavaScript 无法在 onclick 属性中找到函数

javascript - javascript是否使用弹性赛道算法进行处理

javascript - 滚动期间从底部粘性侧边栏

jquery - 图像库/ slider ,仅显示一个缩略图,但单击时显示一个库?

javascript - 带有 ReactJS 的 Highcharts 3D 圆柱体

javascript - Meteor "--mobile-settings"被服务器值覆盖了吗?

javascript - 提交下拉列表中的初始选择

javascript - 当 slider 中的图像处于事件状态时显示 div

javascript - Highcharts 无法动态添加系列