前言

公司使用 highcharts 展示每日胶带母卷报价数据，之前这个功能并不是我负责做的，并且之前也没有接触过 highcharts 图表插件。图表展示了最近几个月的数据，因为数据每天上传，所以数据量较大。xAxis 展示的是日期，若是全部都展示出来，会表现得很臃肿。所以采用 tickInterval = 10 来显示每间隔 10 条数据展示一次日期。这样确实解决了展示臃肿的问题。但带来一个新问题，就是最后一个（也是最新的一个）数据的日期有可能展示的并非当天的日期，虽然折线图上包含了所有的数据，但是 xAxis 展示的结果会让客户觉得数据不是最新的。

解决

当时就想到好几个方法：

  • 将最后一条数据的日期修改成最新的日期
  • 修改模型 Model，处理间隔取值，返回处理后的数据
  • 将数据倒叙展示

最后一条我第一个就否定了，但没想到却是最后最合理也最简便的解决方案。

首先尝试第一个方法，修改 highcharts 的初始化参数，参考 highcharts API 文档。找到两个参数 max 和 softMax，softMax 取不到最大值，不符合，pass；max 因为和 softMax参数一样，都是 Number 类型，而后台提供的数据数字符串形式的日期，也不符合。

想过将日期时间以时间戳的形式传递给 highcharts ，然后调用 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，解决。

文章目录