highcharts 数据过多,间隔显示,如何把坐标轴最后(最新)的一个值显示出来?

前言

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

解决

当时就想到好几个方法:

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

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

首先尝试第一个方法,修改 high­charts 的初始化参数,参考 highcharts API 文档。找到两个参数 max 和 softMaxsoftMax 取不到最大值,不符合,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,解决。

 

上一篇:VUE知识点


下一篇:判断一棵树是否为平衡二叉树