无法在高位图中以{hh:mm}显示datetimelabel格式的x轴数据

问题描述 投票:1回答:1

我想以hh:mm的形式显示x轴数据,例如10:00,12:00、14:00,但即时通讯类似2020年2月14日星期五格林尼治标准时间+0530(印度标准时间) ,我希望这应该是08:57,我想以小时和分钟格式显示数据。

样本数据2020年2月14日,星期五,格林尼治标准时间+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'
                                        }
                                    }
                                }]
                            }

                        });
                    }
                });
        }
javascript jquery highcharts
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.