HighCharts_数据值重叠问题

highCharts图表渲染时,有时会因为数据较密集,而出现数据交叉重叠的问题。如图(代码如下):



    
    
    
    


    


HighCharts_数据值重叠问题_第1张图片

出现问题的有两个地方:

1.x轴(xAxis);2.柱状条顶部显示的数值总和(yAxis,由于是显示的两个柱形条的加和,所以,这里是y轴的属性来控制。如果是单个柱形条的值,则由plotOptions.column属性中对应的属性值来控制)。

解决方案:

1.x轴的问题:

xAxis: {
                    labels: {
                        //自定义显示如果x轴显示出来的数据长度大于16(数据值太密集)时,数值间隔交叉显示,每间隔3个数值显示,如果是第一个数值/最后一个数值也显示。
                        formatter: function () {
                            if (data.year.length >= 16) {
                                return (this.value % 3 == 0 || this.value == data.year[0] || this.value == data.year[data.year.lenght - 1]) ? this.value : '';
                            } else {
                                return this.value;
                            }
                        }
                    }
                },

HighCharts_数据值重叠问题_第2张图片

2.y轴顶部数值显示的问题:

//如果相邻两个数值相差小于300(根据图表的大小,自行调整此数值) 则数据显示的时候向上移动一定的距离,防止重叠显示。如果b-a<300&c-b<300这种情况下,如果b值向上移动了,则c值不用再向上移动了。

var defaultValue = 300;
 var dataFlag = []; //用此bool类型的数组来存放每个数据值是否向上移动显示了。
 var dataTotal = []; //用此数组存放data.yData0和data.yData1的加和(因为显示的是加和的数据)
            if (data.year.length == data.yData0.length && data.year.length == data.yData1.length) {
                for (var i = 0; i < data.year.length; i++) {
                    dataTotal[dataTotal.length] = data.yData0[i] + data.yData1[i];
                    if (i - 1 >= 0 && dataTotal[i] - dataTotal[i - 1] < defaultValue && !dataFlag[i - 1] && String(dataTotal[i]).length >= 4) {
                        dataFlag[dataFlag.length] = true;
                    } else {
                        dataFlag[dataFlag.length] = false;
                    }
                }
            }
yAxis: {
                    stackLabels: {
                        formatter: function () {
                            //this.x指的是x轴坐标的索引
                            if (dataFlag[this.x]) {
                                //margin-bottom属性在这里不起作用,所以,用margin-top值取负值的方式。
                                return "
" + this.total + "
"; } else { return this.total; } } } }


HighCharts_数据值重叠问题_第3张图片
到这里,可以看出数值交叉的问题都解决了。但是,有一点瑕疵的地方就是,在2009柱状条上方的1612这个数值似乎是高度有点高了。这的问题就是,如果当前数值跟前一个数值,相差的数值不到300但是很接近300了,这时还取margin-top=-15这个距离就有点高了。所以,能不能根据相邻两个数值差值的不同取不同的距离呢?

3. 根据差值不同取不同的距离:

var dataValue = []; 用此数值类型的数组来存放每个数据值向上移动显示的距离。
if (data.year.length == data.yData0.length && data.year.length == data.yData1.length) {
                for (var i = 0; i < data.year.length; i++) {
                    dataTotal[dataTotal.length] = data.yData0[i] + data.yData1[i];
                    if (i - 1 >= 0 && dataTotal[i] - dataTotal[i - 1] < defaultValue && !dataFlag[i - 1] && String(dataTotal[i]).length >= 4) {
                        //差值是300的时候,取0;差值是0的时候,取300。
                        dataValue[dataValue.length] = ((300-(dataTotal[i] - dataTotal[i - 1])) / 300 * 15).toFixed(0);
                    } else {
                        dataValue[dataValue.length] = 0;
                    }
                }
            }
yAxis: {
                    stackLabels: {
                        formatter: function () {
                            return "
" + this.total + "
"; } } }

HighCharts_数据值重叠问题_第4张图片
完~~


你可能感兴趣的:(HighCharts_数据值重叠问题)