Skip to content
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

【雷达图】当Y轴的最小值小于0时,颜色渲染问题 #180

Closed
LLawlight opened this issue Jul 9, 2018 · 7 comments
Closed
Assignees

Comments

@LLawlight
Copy link

F2 Version: 3.1.13
Platform: web/h5
Mini Showcase:
image
如图所示,当前颜色为green,透明度0.25,大于0的区域颜色正确,小于0的部分颜色较深也不是green。
尝试针对值小于0的颜色做单独的处理,先改成红色,效果如下图:
image
由此可以看出,值小于0的区域是由两种颜色堆叠在一起产生的颜色效果,且小于0区域的颜色在下方。所以就想尝试将其设置为底色白色或者透明,这样就不会让颜色混在一起,但是!效果如下图:
image
又回到了一开始的情况,因此设置成白色或者透明是无效的。

因为一个整体区域肯定是希望只有一种颜色,而不希望有色差,目前不知道应该如何处理。

望指教!

@simaQ
Copy link
Contributor

simaQ commented Jul 9, 2018

em... 这个是 canvas 的透明度叠加后的结果,https://www.w3schools.com/tags/canvas_globalalpha.asp。

如果不希望有色差的话,我建议使用雷达线图,而不是雷达区域图。但是,你中间的那个小雷达是怎么画出来的?

@LLawlight
Copy link
Author

@simaQ
此处我只用了一个雷达图,并且没有做任何额外的处理。
只是将坐标轴的最小值设置为了负值

chart.source(data, {
    number: {
        min: -33.333333333333333,
        tickInterval: 33.333333333333333
     }
})

因为需求是要第一圈为0点,然后0-100分成三份。

这个效果用官方的例子也能重现。

雷达面积图

修改例子中的

chart.source(data, {
   score: {
     min: 0,
     max: 120,
     nice: false,
     tickCount: 4
   }
});

比如将min改为-120即可重现。

@LLawlight
Copy link
Author

顺便说一下,在F2 3.0.0 版本的时候,小于0的区域是挖空的,所以可以根据自己填充颜色来解决,升级到3.1.13之后就无效了。

@simaQ
Copy link
Contributor

simaQ commented Jul 9, 2018

好的,我看看能不能复现这个问题,今天帮你修掉哦~

@simaQ simaQ self-assigned this Jul 9, 2018
@LLawlight
Copy link
Author

@simaQ
好的,谢谢~
那我就这个图表再提一个问题,还是官方的雷达面积图的例子:
image
在点击Design和Test两个文字的时候出发不了tooltip的onChange事件,在点击左右两边的文字是很容易触发的(虽然也不是整个文字区域都能触发),可能跟点击区域有关。正上方和正下方的文字需要非常靠近图表顶点才能触发。

@simaQ
Copy link
Contributor

simaQ commented Jul 9, 2018

  1. 空心区域的问题已经修复,安装 3.1.14-beta.1 版本试用下是否 ok, ok 的话明天会发布正式版本
  2. Tooltip 的问题,可以另起 issue~

@LLawlight
Copy link
Author

@simaQ
测试好了,成功可用。小于0区域默认挖空,可以自己填充颜色了。
谢谢~
这个issue你来关吧

我另开一个issue说明Tooltip的问题

@simaQ simaQ closed this as completed Jul 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants