Chart： 计算X轴标签个数

在图表中，横轴通常表示分类，纵轴表示数值。

纵轴的数值标签表示，是需要算法支持的，参见【图表轴刻度的思路，算法： 转载X】，略过。

这里说说横轴（X轴）的标签。

 

用K线图做例子，在一个图中表示的蜡烛线非常多，每根线对应一个时间，这些时间就是X轴上要表示的标签。

如果每根线的时间都在X轴表示出来，由于数量太多，就会相互重叠，根本分不清彼此，上面的文字让看不出来。

因此就要减少其数量。如何减少数量？

 

百度的echarts（http://echarts.baidu.com/）中有K线图，分析其源码（\src\component\categoryAxis.js 中【_getInterval】函数），了解到起设计思路。

        /**         * 计算标签显示挑选间隔         */        _getInterval : function () {            var interval   = this.option.axisLabel.interval;            if (interval == 'auto') {                // 麻烦的自适应计算                var fontSize = this.option.axisLabel.textStyle.fontSize;                var data = this.option.data;                var dataLength = this.option.data.length;                if (this.isHorizontal()) {                    // 横向                    if (dataLength > 3) {                        var gap = this.getGap();                        var isEnough = false;                        var labelSpace;                        var labelSize;                        var step = Math.floor(0.5 / gap);                        step = step < 1 ? 1 : step;                        interval = Math.floor(15 / gap);                        while (!isEnough && interval < dataLength) {                            interval += step;                            isEnough = true;                            labelSpace = Math.floor(gap * interval); // 标签左右至少间隔为3px                            for (var i = Math.floor((dataLength - 1)/ interval) * interval;                                  i >= 0; i -= interval                             ) {                                if (this.option.axisLabel.rotate !== 0) {                                    // 有旋转                                    labelSize = fontSize;                                }                                else if (data[i].textStyle) {                                    labelSize = zrArea.getTextWidth(                                        this._getReformedLabel(i),                                        this.getFont(                                            zrUtil.merge(                                                data[i].textStyle,                                                this.option.axisLabel.textStyle                                           )                                        )                                    );                                }                                else {                                    /*                                    labelSize = zrArea.getTextWidth(                                        this._getReformedLabel(i),                                        font                                    );                                    */                                    // 不定义data级特殊文本样式，用fontSize优化getTextWidth                                    var label = this._getReformedLabel(i) + '';                                    var wLen = (label.match(/\w/g) || '').length;                                    var oLen = label.length - wLen;                                    labelSize = wLen * fontSize * 2 / 3 + oLen * fontSize;                                }                                if (labelSpace < labelSize) {                                    // 放不下，中断循环让interval++                                    isEnough = false;                                    break;                                }                            }                        }                    }                    else {                        // 少于3个则全部显示                        interval = 1;                    }

 

 

其设计思路主线是（如果分析错误，见谅！）

1. 遍历所有蜡烛线，找到其对应的标签文字最长的，计算其占用的空间长度（像素）

2. 设定标签之间的间隔（interval），计算其空间长度（像素）

3. 比较上面长度关系

4. 如果interval长度不足以容下最长文字，则增加interval，继续循环比较。直到找到合适的interval。

 

==================================

var step = Math.floor(0.5 / gap);

interval = Math.floor(15 / gap);

==================================

代码中的数字【0.5】【15】似乎是尝试出来的经验值，不具有普遍性。

代码逻辑看起来比较复杂，不容易懂。

 

echarts的上面的代码抛砖引玉，提供了思路。

应该有足够简单的设计能够替代。