2016-02-14 73 views
1

這裏的the code I wrote!,我想顯示X軸只有分鐘沒有Y/M/D?它設置如何將海圖日期時間格式設置爲分鐘?

$(function() { 
    $('#container').highcharts({ 
     chart: { renderTo:'container', spacingRight: 20, zoomType: 'x' }, 
     subtitle: { text: 'Click and drag in the plot area to zoom in' }, 
     title: { text: 'Login Trend' }, 
     xAxis: { categories: ['2/13/2016 1:25:00 AM', '2/13/2016 1:30:00 AM', '2/13/2016 1:35:00 AM', '2/13/2016 1:40:00 AM', '2/13/2016 1:45:00 AM', '2/13/2016 1:50:00 AM', '2/13/2016 1:55:00 AM', '2/13/2016 2:00:00 AM', '2/13/2016 2:05:00 AM', '2/13/2016 2:10:00 AM', '2/13/2016 2:15:00 AM', '2/13/2016 2:20:00 AM', '2/13/2016 2:25:00 AM', '2/13/2016 2:30:00 AM', '2/13/2016 2:35:00 AM', '2/13/2016 2:40:00 AM', '2/13/2016 2:45:00 AM', '2/13/2016 2:50:00 AM', '2/13/2016 2:55:00 AM', '2/13/2016 3:00:00 AM', '2/13/2016 3:05:00 AM', '2/13/2016 3:10:00 AM', '2/13/2016 3:15:00 AM', '2/13/2016 3:20:00 AM', '2/13/2016 3:25:00 AM', '2/13/2016 3:30:00 AM', '2/13/2016 3:35:00 AM', '2/13/2016 3:40:00 AM', '2/13/2016 3:45:00 AM', '2/13/2016 3:50:00 AM', '2/13/2016 3:55:00 AM', '2/13/2016 4:00:00 AM', '2/13/2016 4:05:00 AM', '2/13/2016 4:10:00 AM', '2/13/2016 4:15:00 AM', '2/13/2016 4:20:00 AM', '2/13/2016 4:25:00 AM', '2/13/2016 4:30:00 AM', '2/13/2016 4:35:00 AM', '2/13/2016 4:40:00 AM', '2/13/2016 4:45:00 AM', '2/13/2016 4:50:00 AM', '2/13/2016 4:55:00 AM', '2/13/2016 5:00:00 AM', '2/13/2016 5:05:00 AM', '2/13/2016 5:10:00 AM', '2/13/2016 5:15:00 AM', '2/13/2016 5:20:00 AM', '2/13/2016 5:25:00 AM', '2/13/2016 5:30:00 AM', '2/13/2016 5:35:00 AM', '2/13/2016 5:40:00 AM', '2/13/2016 5:45:00 AM', '2/13/2016 5:50:00 AM', '2/13/2016 5:55:00 AM', '2/13/2016 6:00:00 AM', '2/13/2016 6:05:00 AM', '2/13/2016 6:10:00 AM', '2/13/2016 6:15:00 AM', '2/13/2016 6:20:00 AM', '2/13/2016 6:25:00 AM', '2/13/2016 6:30:00 AM', '2/13/2016 6:35:00 AM', '2/13/2016 6:40:00 AM', '2/13/2016 6:45:00 AM', '2/13/2016 6:50:00 AM', '2/13/2016 6:55:00 AM', '2/13/2016 7:00:00 AM', '2/13/2016 7:05:00 AM', '2/13/2016 7:10:00 AM', '2/13/2016 7:15:00 AM', '2/13/2016 7:20:00 AM', '2/13/2016 7:25:00 AM', '2/13/2016 7:30:00 AM', '2/13/2016 7:35:00 AM', '2/13/2016 7:40:00 AM', '2/13/2016 7:45:00 AM', '2/13/2016 7:50:00 AM', '2/13/2016 7:55:00 AM', '2/13/2016 8:00:00 AM', '2/13/2016 8:05:00 AM', '2/13/2016 8:10:00 AM', '2/13/2016 8:15:00 AM', '2/13/2016 8:20:00 AM', '2/13/2016 8:25:00 AM', '2/13/2016 8:30:00 AM', '2/13/2016 8:35:00 AM', '2/13/2016 8:40:00 AM', '2/13/2016 8:45:00 AM', '2/13/2016 8:50:00 AM', '2/13/2016 8:55:00 AM', '2/13/2016 9:00:00 AM', '2/13/2016 9:05:00 AM', '2/13/2016 9:10:00 AM', '2/13/2016 9:15:00 AM', '2/13/2016 9:20:00 AM', '2/13/2016 9:25:00 AM', '2/13/2016 9:30:00 AM', '2/13/2016 9:35:00 AM', '2/13/2016 9:40:00 AM', '2/13/2016 9:45:00 AM', '2/13/2016 9:50:00 AM', '2/13/2016 9:55:00 AM', '2/13/2016 10:00:00 AM', '2/13/2016 10:05:00 AM', '2/13/2016 10:10:00 AM', '2/13/2016 10:15:00 AM', '2/13/2016 10:20:00 AM', '2/13/2016 10:25:00 AM', '2/13/2016 10:30:00 AM', '2/13/2016 10:35:00 AM', '2/13/2016 10:40:00 AM', '2/13/2016 10:45:00 AM', '2/13/2016 10:50:00 AM', '2/13/2016 10:55:00 AM', '2/13/2016 11:00:00 AM', '2/13/2016 11:05:00 AM', '2/13/2016 11:10:00 AM', '2/13/2016 11:15:00 AM', '2/13/2016 11:20:00 AM', '2/13/2016 11:25:00 AM', '2/13/2016 11:30:00 AM', '2/13/2016 11:35:00 AM', '2/13/2016 11:40:00 AM', '2/13/2016 11:45:00 AM', '2/13/2016 11:50:00 AM', '2/13/2016 11:55:00 AM', '2/13/2016 12:00:00 PM', '2/13/2016 12:05:00 PM', '2/13/2016 12:10:00 PM', '2/13/2016 12:15:00 PM', '2/13/2016 12:20:00 PM', '2/13/2016 12:25:00 PM', '2/13/2016 12:30:00 PM', '2/13/2016 12:35:00 PM', '2/13/2016 12:40:00 PM', '2/13/2016 12:45:00 PM', '2/13/2016 12:50:00 PM', '2/13/2016 12:55:00 PM', '2/13/2016 1:00:00 PM', '2/13/2016 1:05:00 PM', '2/13/2016 1:10:00 PM', '2/13/2016 1:15:00 PM', '2/13/2016 1:20:00 PM', '2/13/2016 1:25:00 PM', '2/13/2016 1:30:00 PM', '2/13/2016 1:35:00 PM', '2/13/2016 1:40:00 PM', '2/13/2016 1:45:00 PM', '2/13/2016 1:50:00 PM', '2/13/2016 1:55:00 PM', '2/13/2016 2:00:00 PM', '2/13/2016 2:05:00 PM', '2/13/2016 2:10:00 PM', '2/13/2016 2:15:00 PM', '2/13/2016 2:20:00 PM', '2/13/2016 2:25:00 PM', '2/13/2016 2:30:00 PM', '2/13/2016 2:35:00 PM', '2/13/2016 2:40:00 PM', '2/13/2016 2:45:00 PM', '2/13/2016 2:50:00 PM', '2/13/2016 2:55:00 PM', '2/13/2016 3:00:00 PM', '2/13/2016 3:05:00 PM', '2/13/2016 3:10:00 PM', '2/13/2016 3:15:00 PM', '2/13/2016 3:20:00 PM', '2/13/2016 3:25:00 PM', '2/13/2016 3:30:00 PM', '2/13/2016 3:35:00 PM', '2/13/2016 3:40:00 PM', '2/13/2016 3:45:00 PM', '2/13/2016 3:50:00 PM', '2/13/2016 3:55:00 PM', '2/13/2016 4:00:00 PM', '2/13/2016 4:05:00 PM', '2/13/2016 4:10:00 PM', '2/13/2016 4:15:00 PM', '2/13/2016 4:20:00 PM', '2/13/2016 4:25:00 PM', '2/13/2016 4:30:00 PM', '2/13/2016 4:35:00 PM', '2/13/2016 4:40:00 PM', '2/13/2016 4:45:00 PM', '2/13/2016 4:50:00 PM', '2/13/2016 4:55:00 PM', '2/13/2016 5:00:00 PM', '2/13/2016 5:05:00 PM', '2/13/2016 5:10:00 PM', '2/13/2016 5:15:00 PM', '2/13/2016 5:20:00 PM', '2/13/2016 5:25:00 PM', '2/13/2016 5:30:00 PM', '2/13/2016 5:35:00 PM', '2/13/2016 5:40:00 PM', '2/13/2016 5:45:00 PM', '2/13/2016 5:50:00 PM', '2/13/2016 5:55:00 PM', '2/13/2016 6:00:00 PM', '2/13/2016 6:05:00 PM', '2/13/2016 6:10:00 PM', '2/13/2016 6:15:00 PM', '2/13/2016 6:20:00 PM', '2/13/2016 6:25:00 PM', '2/13/2016 6:30:00 PM', '2/13/2016 6:35:00 PM', '2/13/2016 6:40:00 PM', '2/13/2016 6:45:00 PM', '2/13/2016 6:50:00 PM', '2/13/2016 6:55:00 PM', '2/13/2016 7:00:00 PM', '2/13/2016 7:05:00 PM', '2/13/2016 7:10:00 PM', '2/13/2016 7:15:00 PM', '2/13/2016 7:20:00 PM', '2/13/2016 7:25:00 PM', '2/13/2016 7:30:00 PM', '2/13/2016 7:35:00 PM', '2/13/2016 7:40:00 PM', '2/13/2016 7:45:00 PM', '2/13/2016 7:50:00 PM', '2/13/2016 7:55:00 PM', '2/13/2016 8:00:00 PM', '2/13/2016 8:05:00 PM', '2/13/2016 8:10:00 PM', '2/13/2016 8:15:00 PM', '2/13/2016 8:20:00 PM', '2/13/2016 8:25:00 PM', '2/13/2016 8:30:00 PM', '2/13/2016 8:35:00 PM', '2/13/2016 8:40:00 PM', '2/13/2016 8:45:00 PM', '2/13/2016 8:50:00 PM', '2/13/2016 8:55:00 PM', '2/13/2016 9:00:00 PM', '2/13/2016 9:05:00 PM', '2/13/2016 9:10:00 PM', '2/13/2016 9:15:00 PM', '2/13/2016 9:20:00 PM', '2/13/2016 9:25:00 PM', '2/13/2016 9:30:00 PM', '2/13/2016 9:35:00 PM', '2/13/2016 9:40:00 PM', '2/13/2016 9:45:00 PM', '2/13/2016 9:50:00 PM', '2/13/2016 9:55:00 PM', '2/13/2016 10:00:00 PM', '2/13/2016 10:05:00 PM', '2/13/2016 10:10:00 PM', '2/13/2016 10:15:00 PM', '2/13/2016 10:20:00 PM', '2/13/2016 10:25:00 PM', '2/13/2016 10:30:00 PM', '2/13/2016 10:35:00 PM', '2/13/2016 10:40:00 PM', '2/13/2016 10:45:00 PM', '2/13/2016 10:50:00 PM', '2/13/2016 10:55:00 PM', '2/13/2016 11:00:00 PM', '2/13/2016 11:05:00 PM', '2/13/2016 11:10:00 PM', '2/13/2016 11:15:00 PM', '2/13/2016 11:20:00 PM', '2/13/2016 11:25:00 PM', '2/13/2016 11:30:00 PM', '2/13/2016 11:35:00 PM', '2/13/2016 11:40:00 PM', '2/13/2016 11:45:00 PM', '2/13/2016 11:50:00 PM', '2/13/2016 11:55:00 PM', '2/14/2016 12:00:00 AM', '2/14/2016 12:05:00 AM', '2/14/2016 12:10:00 AM', '2/14/2016 12:15:00 AM', '2/14/2016 12:20:00 AM', '2/14/2016 12:25:00 AM', '2/14/2016 12:30:00 AM', '2/14/2016 12:35:00 AM', '2/14/2016 12:40:00 AM', '2/14/2016 12:45:00 AM', '2/14/2016 12:50:00 AM', '2/14/2016 12:55:00 AM', '2/14/2016 1:00:00 AM', '2/14/2016 1:05:00 AM', '2/14/2016 1:10:00 AM', '2/14/2016 1:15:00 AM', '2/14/2016 1:20:00 AM', '2/14/2016 1:25:00 AM', '2/14/2016 1:30:00 AM', '2/14/2016 1:35:00 AM', '2/14/2016 1:40:00 AM', '2/14/2016 1:45:00 AM'], type: 'datetime' }, 
     series: [{ data: [45, 122, 134, 138, 105, 153, 121, 110, 160, 170, 110, 144, 121, 136, 146, 134, 142, 143, 139, 136, 144, 148, 155, 148, 143, 148, 143, 152, 152, 152, 159, 145, 164, 169, 155, 155, 152, 148, 156, 146, 152, 162, 134, 148, 153, 148, 164, 147, 156, 142, 155, 157, 151, 143, 147, 147, 156, 163, 139, 155, 157, 172, 150, 158, 143, 169, 132, 147, 152, 162, 141, 169, 132, 142, 141, 142, 130, 133, 119, 110, 110, 149, 121, 128, 117, 135, 116, 126, 116, 134, 102, 123, 120, 130, 143, 122, 134, 119, 122, 132, 142, 121, 129, 127, 106, 143, 138, 128, 125, 121, 130, 119, 128, 126, 124, 137, 125, 145, 148, 130, 142, 137, 118, 135, 124, 132, 134, 133, 148, 157, 154, 168, 161, 130, 163, 159, 169, 155, 162, 140, 166, 167, 131, 161, 142, 124, 147, 145, 141, 157, 142, 139, 149, 166, 140, 158, 149, 125, 151, 139, 119, 136, 142, 125, 171, 140, 144, 152, 133, 143, 132, 145, 121, 124, 144, 104, 161, 141, 139, 137, 148, 135, 145, 139, 766, 139, 147, 108, 162, 132, 124, 138, 152, 138, 149, 135, 127, 135, 139, 138, 156, 140, 152, 152, 160, 130, 137, 147, 133, 148, 122, 128, 177, 145, 152, 123, 154, 121, 152, 136, 123, 134, 124, 100, 152, 154, 136, 146, 147, 117, 157, 142, 160, 156, 144, 134, 169, 185, 146, 139, 162, 118, 144, 140, 126, 136, 134, 103, 151, 147, 164, 137, 138, 138, 151, 159, 128, 161, 139, 124, 162, 138, 145, 138, 152, 146, 161, 163, 144, 140, 157, 121, 178, 173, 158, 147, 154, 146, 145, 152, 141, 146, 138, 120, 149, 171, 573, 186, 162, 142, 152, 149, 108], name: 'Total Logins' }, { data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 260, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name: 'Failed Logins Due to System Error' }, { data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name: 'Failed Logins Due to User Error' }] 
    }); 
}); 
+1

你做了它的方式,你將不得不從每一個類別中刪除的日期。但是,這可能應該使用'datetime'軸來代替類別軸。然後您可以精確指定格式。 –

回答

3

一種方式是通過使用Highcharts.dateFormat,查看以下鏈接瞭解更多詳情http://api.highcharts.com/highcharts#Highcharts.dateFormat

labels: { 
     formatter: function() { 
      return Highcharts.dateFormat('%M', this.value * 1000); // milliseconds not seconds 
     }, 
     } 

檢查示例jsfiddle

FYI:我不得不改變你的代碼的結構,使其稍微容易在陣列代替JScripts內複製/過去的處理數據維護。

相關問題