2016-02-11 24 views
4

我已經使用高圖來繪製圖表。其中x軸有日期時間,y軸有數字。但問題在於x軸上的最後一個標籤沒有出現。所以,如果你能幫助,請幫助我做到這一點。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> 
+0

請閱讀[如何問](http://stackoverflow.com/help/how-to-ask) – JazzCat

回答

3

不要使用類別。你的情況:(!不type: 'time'

  1. 設置xAxis.typedatetime。刪除類別,或至少用tickPositions替換categories

  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/

+0

謝謝帕維爾,這解決了我的問題。 –

相關問題