New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

極坐標軸文字超過四字寬度,其他Lable消失BUG #8791

Closed
jaelys opened this Issue Aug 1, 2018 · 10 comments

Comments

Projects
None yet
3 participants
@jaelys

jaelys commented Aug 1, 2018

One-line summary [问题简述]

極坐標軸文字超過約四個字的寬度後,會造成其他Lable消失
官方範例即可顯示此Bug
http://echarts.baidu.com/examples/editor.html?c=bar-polar-stack-radial

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: 4.1.0
  • Browser version [浏览器类型和版本]: Chrome
  • OS Version [操作系统类型和版本]: win 10

Expected behaviour [期望结果]

4.0.0正常顯示

ECharts option [ECharts配置项]

option = {

}

Other comments [其他信息]

@LYlanfeng

This comment has been minimized.

Show comment
Hide comment
@LYlanfeng

LYlanfeng Aug 15, 2018

原因是找到了,就是下面代码造成的,修改源码是可以解决的,可以自己增加一个配置项目,然后修改源码。但是感觉这个应该属于一个bug吧,对于极坐标的类目计算有问题。

function calculateCategoryInterval() {
//...
   var unitSpan = axis.dataToCoord(tickValue + 1) - axis.dataToCoord(tickValue);// 这个计算出来一直是40
//dataToCoord 这个方式是说是序列尺,但是在这个图好像是否有问题。
    var unitW = Math.abs(unitSpan * Math.cos(rotation)); 
    var unitH = Math.abs(unitSpan * Math.sin(rotation)); // 这个会一直是0,导致下面计算是无穷大

    var maxW = 0;
    var maxH = 0;

    // Caution: Performance sensitive for large category data.
    // Consider dataZoom, we should make appropriate step to avoid O(n) loop.
    for (; tickValue <= ordinalExtent[1]; tickValue += step) {
        var width = 0;
        var height = 0;

        // Polar is also calculated in assumptive linear layout here.
        // Not precise, do not consider align and vertical align
        // and each distance from axis line yet.
        var rect = getBoundingRect(
            labelFormatter(tickValue), params.font, 'center', 'top'
        );
        // Magic number
        width = rect.width * 1.3;
        height = rect.height * 1.3;

        // Min size, void long loop.
        maxW = Math.max(maxW, width, 7);
        maxH = Math.max(maxH, height, 7);
    }

    var dw = maxW / unitW;
    var dh = maxH / unitH;
    // 0/0 is NaN, 1/0 is Infinity.
    isNaN(dw) && (dw = Infinity);
    isNaN(dh) && (dh = Infinity);
    var interval = Math.max(0, Math.floor(Math.min(dw, dh))); // 最终在这个地方取间隔就会出现问题
  // 在这个地方可以增加一个自己属性配置,而重置interval值为0
//...
}

LYlanfeng commented Aug 15, 2018

原因是找到了,就是下面代码造成的,修改源码是可以解决的,可以自己增加一个配置项目,然后修改源码。但是感觉这个应该属于一个bug吧,对于极坐标的类目计算有问题。

function calculateCategoryInterval() {
//...
   var unitSpan = axis.dataToCoord(tickValue + 1) - axis.dataToCoord(tickValue);// 这个计算出来一直是40
//dataToCoord 这个方式是说是序列尺,但是在这个图好像是否有问题。
    var unitW = Math.abs(unitSpan * Math.cos(rotation)); 
    var unitH = Math.abs(unitSpan * Math.sin(rotation)); // 这个会一直是0,导致下面计算是无穷大

    var maxW = 0;
    var maxH = 0;

    // Caution: Performance sensitive for large category data.
    // Consider dataZoom, we should make appropriate step to avoid O(n) loop.
    for (; tickValue <= ordinalExtent[1]; tickValue += step) {
        var width = 0;
        var height = 0;

        // Polar is also calculated in assumptive linear layout here.
        // Not precise, do not consider align and vertical align
        // and each distance from axis line yet.
        var rect = getBoundingRect(
            labelFormatter(tickValue), params.font, 'center', 'top'
        );
        // Magic number
        width = rect.width * 1.3;
        height = rect.height * 1.3;

        // Min size, void long loop.
        maxW = Math.max(maxW, width, 7);
        maxH = Math.max(maxH, height, 7);
    }

    var dw = maxW / unitW;
    var dh = maxH / unitH;
    // 0/0 is NaN, 1/0 is Infinity.
    isNaN(dw) && (dw = Infinity);
    isNaN(dh) && (dh = Infinity);
    var interval = Math.max(0, Math.floor(Math.min(dw, dh))); // 最终在这个地方取间隔就会出现问题
  // 在这个地方可以增加一个自己属性配置,而重置interval值为0
//...
}
@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Aug 15, 2018

Contributor

@LYlanfeng 赞,感兴趣提个 PR 吗?

Contributor

Ovilia commented Aug 15, 2018

@LYlanfeng 赞,感兴趣提个 PR 吗?

@LYlanfeng

This comment has been minimized.

Show comment
Hide comment
@LYlanfeng

LYlanfeng Aug 15, 2018

@Ovilia 好的,下午弄下。

LYlanfeng commented Aug 15, 2018

@Ovilia 好的,下午弄下。

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Aug 15, 2018

Contributor

@LYlanfeng 谢谢,注意下代码格式,跟其他代码保持一致~

Contributor

Ovilia commented Aug 15, 2018

@LYlanfeng 谢谢,注意下代码格式,跟其他代码保持一致~

@LYlanfeng

This comment has been minimized.

Show comment
Hide comment
@LYlanfeng

LYlanfeng Aug 15, 2018

@Ovilia 嗯,不客气

LYlanfeng commented Aug 15, 2018

@Ovilia 嗯,不客气

@LYlanfeng

This comment has been minimized.

Show comment
Hide comment
@LYlanfeng

LYlanfeng Aug 15, 2018

@Ovilia 已经提交PR,做的加法处理,不影响其他逻辑,增加属性用于解决显示所有问题。
#8872

LYlanfeng commented Aug 15, 2018

@Ovilia 已经提交PR,做的加法处理,不影响其他逻辑,增加属性用于解决显示所有问题。
#8872

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Aug 15, 2018

Contributor

@LYlanfeng 赞,我明天细看一下,再测一下~

Contributor

Ovilia commented Aug 15, 2018

@LYlanfeng 赞,我明天细看一下,再测一下~

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Aug 27, 2018

Contributor

@LYlanfeng 我理解了一下源码,这里不应该增加一个额外的配置项。这个问题本质上是由于计算得到坐标轴文字过于密集,而使用 interval 将数据的间隙设大,而实际上 AngleAxis 文字的重叠方式计算需要对这一方法进行重载。我后面会再改下,PR 就先 close 了,感谢贡献!

Contributor

Ovilia commented Aug 27, 2018

@LYlanfeng 我理解了一下源码,这里不应该增加一个额外的配置项。这个问题本质上是由于计算得到坐标轴文字过于密集,而使用 interval 将数据的间隙设大,而实际上 AngleAxis 文字的重叠方式计算需要对这一方法进行重载。我后面会再改下,PR 就先 close 了,感谢贡献!

@LYlanfeng

This comment has been minimized.

Show comment
Hide comment
@LYlanfeng

LYlanfeng Aug 27, 2018

@Ovilia 嗯,是的,只是怕修改其他地方出现问题,没时间完成去理解所有代码。修改也没办法全部测试,所以采取的其他方式

LYlanfeng commented Aug 27, 2018

@Ovilia 嗯,是的,只是怕修改其他地方出现问题,没时间完成去理解所有代码。修改也没办法全部测试,所以采取的其他方式

@Ovilia

This comment has been minimized.

Show comment
Hide comment
@Ovilia

Ovilia Aug 27, 2018

Contributor

@LYlanfeng 修复了,等下次发版就能用了。谢谢你的贡献!

Contributor

Ovilia commented Aug 27, 2018

@LYlanfeng 修复了,等下次发版就能用了。谢谢你的贡献!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment