x轴上的最后一个标签,日期时间格式不是高图

时间:2016-02-11 07:30:39

标签: javascript php jquery highcharts

我使用高图来绘制图表。其中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 个答案:

答案 0 :(得分:3)

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

  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选项 - 因此最后一个刻度不会超过极值。

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