Highcharts双饼图-字被重叠了,求救

chendc 发布于 2017/06/09 18:13
阅读 894
收藏 0

Highcharts双饼图-字被重叠了,求救

加载中
0
chaozhang
chaozhang

可以自建了一个轮询(setTimeout)来显示的,或者你只显示大于百分之多少的字,其它的做手动触发

chendc
chendc
恩,这也是一个思路。谢谢您啦
0
chendc
chendc

想了一个办法,思路:

(1).找到文字对应的class   .highcharts-series-0  下的g标签 在饼图加载完成之后,重写下 translate的Y坐标值即可。

(2)思路步骤如下:

1.记录文字的Y坐标值

2.记录Y坐标值的重复坐标数据或者是挨得太近的Y坐标(小于15--测试的来的距离)

    2.1排序

    2.2笛卡尔积匹配

    2.3符合条件的数组去重。

3.重新刷新重叠文字的Y坐标值

    3.1求(会重叠的)Y坐标值的平均值

    3.2遍历,改变重叠文字Y坐标值

优化之前:

 

//解决饼图上的文字被重叠问题
function solveFontOverlap()
{
    //1.记录文字的Y坐标值
    var tempArray_Y = new Array();
    var tempG = 0;
    $(".highcharts-series-0 g").each(function(){
        var translate = $(this).attr("transform");
        tempArray_Y[tempG] = translate.substring(translate.lastIndexOf(",") + 1,translate.lastIndexOf(")"));
        tempG ++;
    });
    
    //2.记录Y坐标值的重复坐标数据或者是挨得太近的Y坐标(小于15)
    var result=[];
    //2.1排序
    tempArray_Y.sort(function (a,b) {
        return a-b;
    });
    //2.2笛卡尔积匹配
    for(var i = 0; i < tempArray_Y.length; i++)
    {
        for(var j = 0; j< tempArray_Y.length; j++)
        {
            //不和自己比较
            if(i == j) break;
            var mathTemp = Math.abs(tempArray_Y[i] - tempArray_Y[j]);
            if(mathTemp < 15)
            {
                result.push(tempArray_Y[i]);
            }
        }
    }
    //2.3把符合条件的数组去重。
    result = unique2(result);
    
    //3.重新刷新重叠文字的Y坐标值
    //3.1求(会重叠的)Y坐标值的平均值
    var Yaverage = result.reduce(function(prevValue,currentValue){
        prevValue = parseInt(prevValue) + parseInt(currentValue);
        return prevValue;
    },0)/result.length;
    
    //3.2遍历,改变重叠文字Y坐标值
    $(".highcharts-series-0 g").each(function(){
        var translate = $(this).attr("transform");
        var valueX = translate.substring(translate.lastIndexOf("(") + 1, translate.lastIndexOf(","));
        var valueY = translate.substring(translate.lastIndexOf(",") + 1, translate.lastIndexOf(")"));
        for(var i=0;i<result.length;i++)
        {
            if(result[i] == valueY)
            {
                Yaverage += 15; //Y坐标值的步伐  15
                valueY = Yaverage;
                $(this).attr("transform","translate(" + valueX + "," + valueY + ")");
                break;
            }
        }
    });
}

//数组去重
function unique2(array)
{
    var n = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < array.length; i++)
    {
        val = array[i];
        type = typeof val;
        if (!n[val])
        {
            n[val] = [type];
            r.push(val);
        }
        else if (n[val].indexOf(type) < 0)
        {
            n[val].push(type);
            r.push(val);
        }
    }
    return r;
}

调整之后:

0
简数科技
简数科技

可以控件单个数据的显示大小的,具体参考使用教程:https://www.hcharts.cn/docs/pie-chart

这个平台上回答Highcharts问题较少,建议直接在Highcharts中文官网论坛上提问哦

1、Highcharts 中文官网:https://www.hcharts.cn/

2、Highcharts 中文学习教程:https://www.hcharts.cn/docs

3、Highcharts 中文论坛:https://bbs.hcharts.cn/forum.php

返回顶部
顶部