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

给geomType为area设置图例设置useHtml无效 #2985

Closed
1 task done
0x1af2aec8f957 opened this issue Nov 6, 2020 · 3 comments
Closed
1 task done

给geomType为area设置图例设置useHtml无效 #2985

0x1af2aec8f957 opened this issue Nov 6, 2020 · 3 comments

Comments

@0x1af2aec8f957
Copy link

0x1af2aec8f957 commented Nov 6, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

按照上述实例中的代码书配置useHtml: true后,无法渲染出html格式的图例

Environment Info
g2 3.5.8
System MacOS
Browser Chrome

预览图:

image

上图中并未出现html元素。

@0x1af2aec8f957
Copy link
Author

该问题有临时解决方案,
图例出现的前提条件:必须在G2geomType必须配置color的field参数才能渲染出对应的图例。

这个问题,貌似出自color的field参数对应的data值为数字的情况,如果是字符串则没有该问题。

将示例中设置color的代码改为:

chart
  .area()
  .position("time*loadRate")
  .color("loadRate", () => "l(45) 0:#FBFDFF 1:#0091FF");

这样最后的渲染图为:

image

上图渲染出了对应的图例设置的HTML元素。

我自己后续经过多次测试,发现只要设置color的field,在源数据的值为数字的情况下这种情况100%出现。

在需要使用一个值大于或小于使用其它颜色时,不能直接使用数字类型的field判断后返回颜色,必须要设置单独的字符串字段来判断。

@hustcc
Copy link
Member

hustcc commented Jan 5, 2021

G2 4.x 中已经移除这个 html legend。 这种情况可以在图表外部使用 div 去绘制。然后点击之后调用 chart.filter 去过滤数据即可。

@hustcc hustcc closed this as completed Jan 5, 2021
@hustcc
Copy link
Member

hustcc commented Jan 5, 2021

ref: #2954

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