highcharts 數據過多，間隔顯示，如何把坐標軸最后（最新）的一個值顯示出來？

前言

公司使用 high­charts 展示每日膠帶母卷報價數據，之前這個功能並不是我負責做的，並且之前也沒有接觸過 high­charts 圖表插件。圖表展示了最近幾個月的數據，因為數據每天上傳，所以數據量較大。xAxis 展示的是日期，若是全部都展示出來，會表現得很臃腫。所以采用 tickInterval = 10 來顯示每間隔 10 條數據展示一次日期。這樣確實解決了展示臃腫的問題。但帶來一個新問題，就是最后一個（也是最新的一個）數據的日期有可能展示的並非當天的日期，雖然折線圖上包含了所有的數據，但是 xAxis 展示的結果會讓客戶覺得數據不是最新的。

解決

當時就想到好幾個方法：

• 將最后一條數據的日期修改成最新的日期
• 修改模型 Model，處理間隔取值，返回處理后的數據
• 將數據倒敘展示

最后一條我第一個就否定了，但沒想到卻是最后最合理也最簡便的解決方案。

首先嘗試第一個方法，修改 high­charts 的初始化參數，參考 highcharts API 文檔。找到兩個參數 max 和 softMax，softMax 取不到最大值，不符合，pass；max 因為和 softMax 參數一樣，都是 Num­ber 類型，而后台提供的數據數字符串形式的日期，也不符合。

想過將日期時間以時間戳的形式傳遞給 high­charts ，然后調用 HighCharts.dateFormat() 對時間戳格式化處理后展示，示例如下：

$(function () {
    var categoryLinks = {
        'Foo': 'http://www.google.com/search?q=foo',
        'Bar': 'http://www.google.com/search?q=foo+bar',
        'Foobar': 'http://www.google.com/serach?q=foobar'
    };
    $('#container').highcharts({
        xAxis: {
            categories: ['Foo', 'Bar', 'Foobar'],
            labels: {
                formatter: function () {
                    return '<a href="' + categoryLinks[this.value] + '">' +
                        this.value + '</a>';
                }
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4]
        }]
    });
});

但測試的時候，日期轉換不正確，沒有達到預期，並且在設置 max 后，tickInterval 屬性似乎失效了，展示了更多的日期，並且都是不正確的日期。

第一個方法到此，告一段落。

開始實驗第二個方法。將 tickInterval 設置為 1，模型的數據進行間隔取值。

以下為間隔 10 天取一條數據的 SQL 示例：

SELECT * FROM `dates` WHERE DATEDIFF(`date`, '2018-01-01') % 10 = 0;

然后取最新一條數據，與返回的數組的最后一條進行比對，如果兩者日期不同，則將最新一條數據插入到返回數組中。

這個方法完美解決了間隔取值有可能取不到最新一條的問題。但取到的數據不是全部數據，折線圖就不能完全展示最近一段時間的價格變化，這樣的做法沒有意義。依然 pass 掉。

最后還是領導智高一籌，他提出可以先返回數據倒敘排序，然后間隔取值，最后展示的時候 xAxis 上的點再倒置展示。他去翻看文檔，果然找到了這個屬性 reversed: Boolean 是否翻轉圖表。將數據倒敘 DESC 取出，然后設置 reversed 為 true，解決。