Highcharts 非等間隔時間軸圖表實作指南

Highcharts 非等間隔時間軸圖表實作指南

Highcharts 預設類別軸要求等間隔資料，但實際業務中時間點往往不規則。本文示範如何啟用 xAxis.type: 'datetime'，配合時間戳資料格式，讓 Highcharts 自動處理不等間隔時間座標，並關閉 UTC 使用本地時間，打造真實的時間序列散點圖。

核心配置重點

1. 資料格式：[[timestamp, value], ...]，timestamp 為毫秒級 Unix 時間戳（Java Date.getTime() 直接取得）。
2. 關閉 UTC：Highcharts.setOptions({ global: { useUTC: false } })，確保顯示本地時間。
3. X 軸型別：xAxis: { type: 'datetime' }，啟用時間軸自動刻度。
4. 標籤格式化：dateTimeLabelFormats 統一指定 %Y-%m-%d %H:%M:%S，避免縮放時格式跳動。

完整範例程式碼

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
// 1. 資料：[時間戳(毫秒), 數值]
var data = [
    [1478050088000, 856], [1478050364000, 781],
    [1478050786000, 744], [1478050864000, 732],
    [1478050775000, 775], [1478050297000, 785]
];

$(function () { drawChart(); });

function drawChart() {
    // 2. 使用本地時間
    Highcharts.setOptions({ global: { useUTC: false } });

    var chartPic = new Highcharts.Chart({
        colors: ["#01D26D"],
        chart: {
            renderTo: 'content',
            type: 'scatter',      // 散點圖
            zoomType: 'xy'        // 支援 XY 區域縮放
        },
        title: { text: '' },
        subtitle: { text: '' },
        exporting: { enabled: false },   // 隱藏匯出按鈕
        credits: { enabled: false },     // 隱藏版權
        tooltip: {
            headerFormat: '<span>',
            pointFormat: '<table><tr><td><b>{point.y:.0f}</b></td></tr></table>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            xDateFormat: '%Y-%m-%d %H:%M:%S'
        },
        // 3. 時間軸核心配置
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%Y-%m-%d %H:%M:%S',
                second:      '%Y-%m-%d %H:%M:%S',
                minute:      '%Y-%m-%d %H:%M:%S',
                hour:        '%Y-%m-%d %H:%M:%S',
                day:         '%Y-%m-%d %H:%M:%S',
                month:       '%Y-%m-%d %H:%M:%S',
                year:        '%Y-%m-%d %H:%M:%S'
            }
        },
        yAxis: {
            title: { text: 'Y 軸名稱' },
            plotLines: [{ value: 0, width: 1, color: '#808080' }]
        },
        legend: {
            layout: 'vertical', align: 'center', verticalAlign: 'bottom', borderWidth: 0
        },
        series: [{ name: 'series', data: data }]
    });
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>

效果展示

常見坑點提醒

• 資料時間戳必須為毫秒，秒級需乘 1000。
• 若資料來自 Java 後端，直接用 date.getTime() 傳遞 Long 值給前端。
• 若需顯示特定時區，可在 global.timezoneOffset 設定分鐘偏移量。
• zoomType: 'xy' 讓使用者能同時水平、垂直縮放，適合探索稠密時間點。

延伸應用

同樣配置適用於 line、spline、area 等時間序列圖表，只需修改 chart.type 即可。若資料量極大（>10 萬點），建議開啟 boost 模組或採用 Highstock。