X 轴中的最后一个标签,日期时间格式不在高图表中

last label in x axis with datetime format not coming in highchart

本文关键字:格式 时间 高图表 日期 最后一个 标签      更新时间:2023-09-26

我用高图来绘制图表。其中 x 轴有日期时间,y 轴有数字。但问题是 X 轴上的最后一个标签不会到来。所以如果你能帮忙,请帮我做。

如果我使用 Endontick 并显示最后一个标签,它会在末尾添加 00:00:04这是相同代码的jsfiddle的链接就像一个4k行代码https://goo.gl/bbwZRC

<script>
                    $(function () {
                    $('#trend1307').highcharts({
                    chart:{
                    defaultSeriesType: 'line',
                                                    events: {
                        load: function () {
                        var car = this;
                                $(car.series).each(function (i, serie) {
                        $('<li><span style="background-color: ' + serie.color + ';"></span>' + serie.name + '</li>').click(function () {
                        serie.visible ? serie.hide() : serie.show();
                        }).appendTo('#legend1307');
                                });
                                }
                        }
                    },
                            legend: {
                            enabled: false
                                    },
                            title:false,
                            borderWidth: 1,
                            xAxis: {
                 type:'time',
                                    title: {
                                    text: 'Time (HH:MM:SS)'
                                    },
                               categories: [                                        Date.UTC(2016,01,25,21,00,00)
      ,                                        Date.UTC(2016,01,25,21,05,00)
      ,                                        Date.UTC(2016,01,25,21,10,00)
      ,                                        Date.UTC(2016,01,25,21,15,00)
      ,                                        Date.UTC(2016,01,25,21,20,00)
      ,                                        Date.UTC(2016,01,25,21,25,00)
      ,                                        Date.UTC(2016,01,25,21,30,00)
      ,                                        Date.UTC(2016,01,26,19,05,00)
      ,                                        Date.UTC(2016,01,26,19,10,00)
      ,                                        Date.UTC(2016,01,26,19,15,00)
      ,                                        Date.UTC(2016,01,26,19,20,00)
      ,                                        Date.UTC(2016,01,26,19,25,00)
      ,                                        Date.UTC(2016,01,26,19,30,00)
      ,                                        Date.UTC(2016,01,26,19,35,00)
      ,                                        Date.UTC(2016,01,26,19,40,00)
      ,                                        Date.UTC(2016,01,26,19,45,00)
      ,                                        Date.UTC(2016,01,26,19,50,00)
      ,                                        Date.UTC(2016,01,26,19,55,00)
      ,                                        Date.UTC(2016,01,26,20,00,00)
      ,                                        Date.UTC(2016,01,26,20,05,00)
      ,                                        Date.UTC(2016,01,26,20,10,00)
      ,                                        Date.UTC(2016,01,26,20,15,00)
      ,                                        Date.UTC(2016,01,26,20,20,00)
      ,                                        Date.UTC(2016,01,26,20,25,00)
      ,                                        Date.UTC(2016,01,26,20,30,00)
      ,                                        Date.UTC(2016,01,26,20,35,00)
      ,                                        Date.UTC(2016,01,26,20,40,00)
      ,                                        Date.UTC(2016,01,26,20,45,00)
      ,                                        Date.UTC(2016,01,26,20,50,00)
      ,                                        Date.UTC(2016,01,26,20,55,00)
      ,                                        Date.UTC(2016,01,26,21,00,00)
      ],
                                    type: 'datetime',

                                                                          showLastLabel:true,
                                    labels: {
                                    format: '{value:%H:%M:%S}',
                                            rotation: - 90,
                                            style: {
                                            fontSize: '9px',
                                                    color:"black"
                                          }
                         },
                            },
                            yAxis: {
                            plotLines: [     , {
                                value: 25,
                                        color: 'red',
                                        dashStyle: 'shortdash',
                                        width: 2,
                                        label: {
                                        text: 'Maximum Temperature 25°C',
                                                style: {
                                                fontSize: '9px',
                                                        color:"black"
                                                        }
                                        },
                                        zIndex: 3
                                        }],
                                                                                    max:26,                                            
                                    labels: {
                                    format: '{value:.1f}'
                                    },
                                    tickInterval: 1,
                                    title: {
                                    text: 'Temperature (°C)'
                                    },
                            },
                            tooltip: {
                            valueSuffix: '°C'
                            },
                            series: [
                                    {
     name: 'T-464',
                                lineWidth:.75,
                                        data: [
    19.3,19.6,19.4,19.2,19.4,19.5,19.3,19.3,19.3,19.2,19.5,19.5,19.4,19.1,18.8,18.6,19,18.8,18.7,18.6,18.7,18.6,18.6,18.5,18.4,18.4,18.5,18.4,18.4,18.3,18.2,18.2,18.3,18.4,18.2,18.1,18.1,18.2,18.2,18,18,18.1,18.2,18.3,18.2,18.1,18.1,17.9,18,18.3,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.4,18.4,18.4,18.4,18.1,18.1,18.2,18.2,18.4,18.6,18.4,18.4,18.7,18.7,18.6,18.6,18.6,18.5,18.4,18.5,18.6,18.5,18.6,18.4,18.5,18.6,18.6,18.5,18.6,18.4,18.4,18.3,18.4,18.5,18.5,18.5,18.4,18.5,18.4,18.3,18.2,18.2,18.2,18.3,18.4,18.4,18.3,18.2,18.4,18.4,18.2,18.1,18.1,18.3,18.4,18,18.1,17.8,18,17.8,18,17.8,17.9,17.9,18,17.7,18,17.8,17.9,17.8,18.1,18,17.8,18,17.8,18.1,17.9,17.8,17.7,17.8,17.5,17.8,17.8,17.7,17.7,17.9,17.8,17.7,17.9,17.6,17.9,17.6,17.9,17.7,17.9,17.8,17.6,17.8,17.8,17.8,18,18,17.9,18.1,18.3,18.2,18.1,18.1,18.4,18.2,18.1,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.1,18.1,18.2,18.4,18.3,18.2,18.2,18.1,18,18.1,18,18.1,18.3,18.3,18.2,18.1,18.1,18.1,17.9,18,18.1,18,18,18,18,18.1,18.1,18,18,17.9,18,18.1,18.3,18.3,18.2,18.3,18.1,18,18,18.1,18.1,18.1,18.1,18.5,18.3,18.3,18.3,18.2,18.1,17.9,18,18,18.1,18.4,18.3,18.3,18,18,17.9,17.8,17.9,17.8,17.8,18.1,17.9,17.8,17.6,17.9,17.8,17.8,17.8,17.8,17.7,17.8,17.8,17.8,17.9,17.8,17.6,17.7,17.9,17.8,17.7,17.6,17.6,17.7,17.7,17.7,17.6,17.6,17.6,17.7,17.6,17.5,17.8,17.7,17.8,17.8,17.9,18.1,17.7,17.7,17.8,17.9,17.8,17.5,17.8,17.7,17.9,17.7                                            ],
                                }
    ,                                    {
     name: 'T-2306',
                                lineWidth:.75,
                                        data: [
    21.1,21.3,21.2,20.9,21.2,21.2,21,20.9,20.8,20.7,21,20.8,20.5,20.1,19.8,19.5,19.8,19.6,19.5,19.5,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.2,19.2,19.1,19.1,19.1,19.1,19.1,19,18.9,19,19.1,19,18.8,18.9,18.9,18.9,19.1,19.2,19.3,19.3,19.4,19.6,19.8,19.7,19.9,20.1,20.2,20.3,20.3,20.3,20.2,20.2,20.3,20.2,20.2,20.2,19.9,19.9,20.1,20.1,20.2,20.3,20.2,20.2,20.4,20.3,20.2,20.3,20.3,20.2,20.2,20.6,20.4,20.3,20.4,20.3,20.4,20.4,20.4,20.4,20.4,20.3,20.3,20.2,20.4,20.4,20.4,20.4,20.3,20.5,20.3,20.2,20.2,20.1,20.2,20.2,20.3,20.2,20.2,20.2,20.3,20.2,19.9,19.8,19.8,19.8,19.8,19.3,19.1,18.9,18.9,18.8,18.8,18.7,18.7,18.8,18.8,18.6,18.8,18.6,18.8,18.5,18.8,18.7,18.7,18.8,18.6,18.8,18.7,18.6,18.5,18.4,18.2,18.4,18.4,18.4,18.4,18.4,18.4,18.4,18.6,18.3,18.6,18.3,18.5,18.4,18.6,18.4,18.4,18.4,18.4,18.6,18.9,18.9,19,19.4,19.6,19.5,19.4,19.4,19.7,19.5,19.6,19.6,19.8,19.8,19.9,19.9,19.9,19.8,19.8,19.9,19.8,19.8,19.9,20,20.1,19.9,19.9,19.8,19.8,19.9,19.8,19.8,20,20,20,19.8,19.7,19.8,19.6,19.7,19.7,19.6,19.6,19.7,19.7,19.8,19.9,19.8,19.8,19.7,19.7,19.8,19.9,20,19.9,19.9,19.8,19.7,19.5,19.5,19.3,18.8,18.7,18.9,18.7,18.6,18.6,18.6,18.5,18.4,18.4,18.4,18.6,18.8,18.7,18.8,18.4,18.4,18.4,18.4,18.4,18.3,18.3,18.4,18.3,18.3,18.2,18.3,18.3,18.3,18.2,18.3,18.2,18.2,18.3,18.3,18.3,18.2,18.2,18.2,18.3,18.2,18.2,18.1,18.1,18.2,18.1,18.1,18.1,18.1,18.2,18.2,18,18.1,18.3,18.2,18.3,18.2,18.3,18.6,18.1,18.2,18.3,18.4,18.2,18,18.3,18.2,18.4,18.3                                            ],
                                }
    ,                                    {
     name: 'T-2282',
                                lineWidth:.75,
                                        data: [
    7.3,17.1,17.1,17.3,17.2,17.3,17.3,17.4,17.4,17.4,17.5,17.3,17.4,17.6,17.6,17.7,17.6,17.6,17.8,17.6,17.7,17.8,17.7,17.7,17.6,17.7,17.7,17.9,17.8,17.8,17.8,17.8,17.8,17.8,17.8,17.7,17.8,17.7,17.7,17.8,17.8,17.7,17.8,17.9,18.6,18.4,18.4,18.4,18.4,18.3,18.2,18.4,18.4,18.6,18.9,18.8,18.9,18.5,18.6,18.4,18.4,18.4,18.3,18.4,18.7,18.6,18.5,18.2,18.5,18.4,18.3,18.4,18.4,18.2,18.4,18.6,18.5,18.5,18.3,18.4,18.4,18.6,18.4,18.4,18.3,18.3,18.2,18.3,18.3,18.2,18.1,18.2,18.3,18,17.8,18.1,17.9,18,17.9,17.9,18.3,17.7,17.8,18,18.2,17.9,17.5,17.9,17.8,18.1,17.9                                            ],
                                }
    ,                                    {
     name: 'T-2089',
                                lineWidth:.75,
                                        data: [
    19.6,19.6,19.7,19.5,19.7,19.6,19.6,19.5,19.4,19.5,19.7,19.6,19.3,19.2,19,18.7,18.9,18.8,18.7,18.7,18.7,18.7,18.6,18.5,18.6,18.5,18.5,18.4,18.4,18.3,18.4,18.3,18.4,18.4,18.3,18.2,18.2,18.2,18.1,17.9,18,18.1,18.1,18.2,18.1,17.9,17.9,17.8,17.8,17.8,17.7,17.7,17.7,17.7,17.8,17.8,17.8,17.7,17.7,17.8,17.8,17.7,17.7,17.5,17.6,17.6,17.6,17.6,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.6,17.6,17.7,17.5,17.4,17.4,17.3,17.4,17.4,17.5,17.5,17.4,17.4,17.4,17.3,17.4,17.5,17.4,17.5,17.5,17.6,17.4,17.4,17.4,17.5,17.5,17.5,17.6,17.6,17.6,17.6,17.6,17.6,17.4,17.4,17.5,17.5,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.8,17.8,17.6,17.7,17.7,17.8,17.6,18,17.9,17.8,17.9,17.7,18.1,18,17.9,17.9,17.8,17.6,17.7,17.9,17.9,17.9,17.9,17.8,17.8,17.9,17.7,17.9,17.7,17.9,17.8,17.9,17.8,17.8,17.9,17.8,17.9,17.8,17.7,17.6,17.7,17.7,17.6,17.5,17.5,17.7,17.6,17.6,17.7,17.7,17.7,17.7,17.7,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.8,17.9,17.9,18.1,18.2,18.3,18.2,18.3,18.4,18.5,18.5,18.4,18.4,18.6,18.4,18.5,18.6,18.5,18.5,18.4,18.4,18.5,18.7,18.8,18.8,18.7,18.8,18.8,18.8,18.8,18.8,18.8,18.8,18.9,19,18.9,18.9,19.1,19.2,19.5,19.4,19.4,19.4,19.5,19.4,19.3,19.3,19.2,19.4,19.6,19.6,19.7,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.4,19.3,19.3,19.1,19.1,19.1,19,19.1,19.3,19.1,19.2,19.3,19.2,19.1,19.1,19.1,19.1,19.2,19.1,19.1,19.1,19,19,19,18.9,18.8,18.8,18.8,18.8,18.6,18.4,18.4,18.3,18.4,18.2,18.3,18.5,18.2,18.2,18.2,18.4,18.2,17.9,18.1,18.1,18.2,18.3                                            ],
                                }
                                    ],
                            plotOptions:{
                            line:{
                            marker:{
                            enabled : false
                            }
                            }
                            },
                            legend:{
                            enabled:false
                                    }

                    });
                    });</script>

不要使用类别。在您的情况下:

  1. xAxis.type设置为datetime(不是type: 'time'!删除类别,或至少将categories替换为 tickPositions .

  2. 如果点之间的间隔固定,请使用 series.pointStartseries.pointInterval(或pointIntervalUnit )。如果您的数据可能不规则,请更改您的数据格式。目前您有 data: [value, value, value] .而是使用data: [ [timestamp, value], [timestamp, value], [timestamp, value] ]

  3. 添加xAxis.tickInterval选项 - 例如 3600 * 1000 ,以确定刻度应该出现的位置。

  4. 添加xAxis.maxPadding = 0选项 - 因此最后一个即时报价不会超过极端值。

就这样。点之间有固定间隔的示例:https://jsfiddle.net/txuhs36t/2/