antvis/G2

【v5】散点图指定颜色通道,tooltip title 不应该显示颜色值 #5164

Deathsteps posted onGitHub

问题描述

<img width="1060" alt="image" src="https://github.com/antvis/G2/assets/1549118/0ac3389e-4c4b-4cff-a7c5-1e16d16e3128">

期望结果

这种情况下 tooltip 的 title 应该不显示。(当然,这种情况开发者也可以手动指定一下 title,就是很费事)

如何重现

官方代码修改

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart
  .point()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/basement_prod/6b4aa721-b039-49b9-99d8-540b3f87d339.json',
  })
  .encode('x', 'height')
  .encode('y', 'weight')
  .encode('color', 'rgb(0, 0, 255)');

chart.render();

额外信息

  • G2 5.0.11

嗯嗯,这个问题我看一下,不过如果颜色不是数据驱动的化,推荐写在 style 里面。

chart.point().style('color', 'rgb(0, 0, 255)');
posted by pearmini almost 2 years ago

嗯嗯,这个问题我看一下,不过如果颜色不是数据驱动的化,推荐写在 style 里面。

chart.point().style('color', 'rgb(0, 0, 255)');

好的。 另外,我咨询一下,是不是 shape, color, size 的常量值都是可以通过 style 设置的。

posted by Deathsteps almost 2 years ago

是的。看你使用 G2 v5 比较多,提了很多有价值问题,有兴趣来参加 AntV 的有奖征文活动吗?

随便什么主题都可以~

posted by hustcc almost 2 years ago

嗯嗯,这个问题我看一下,不过如果颜色不是数据驱动的化,推荐写在 style 里面。

chart.point().style('color', 'rgb(0, 0, 255)');

好的。 另外,我咨询一下,是不是 shape, color, size 的常量值都是可以通过 style 设置的。

是的,都可以通过 style 设置。

posted by pearmini almost 2 years ago

不知道是不是我幻觉了,5.0.12 版本,这么配置不生效。(关草率了:joy:

<img width="1039" alt="image" src="https://github.com/antvis/G2/assets/1549118/ebd5d4da-d894-4d45-86df-aa3dd27bd98c">

posted by Deathsteps almost 2 years ago

哦哦哦,我写错了 .style('stroke', 'red') 而不是 .style('color', 'red')

posted by pearmini almost 2 years ago

我发现这个方案有个问题,就是没有 encode color 方便。因为不同的图,它要设置的 style 不一样。我要针对不同的图,写不同的 style。比如,柱图就要 .style('fill', 'red'),不同 shape 还要额外判断。但 encode 的这个方案就很直接。

哦哦哦,我写错了 .style('stroke', 'red') 而不是 .style('color', 'red')

posted by Deathsteps almost 2 years ago

是的。看你使用 G2 v5 比较多,提了很多有价值问题,有兴趣来参加 AntV 的有奖征文活动吗?

随便什么主题都可以~

我才看到 :joy: 晚点我看看有没有什么心得可以写的

posted by Deathsteps almost 2 years ago

我发现这个方案有个问题,就是没有 encode color 方便。因为不同的图,它要设置的 style 不一样。我要针对不同的图,写不同的 style。比如,柱图就要 .style('fill', 'red'),不同 shape 还要额外判断。但 encode 的这个方案就很直接。

哦哦哦,我写错了 .style('stroke', 'red') 而不是 .style('color', 'red')

不理解是什么意思,style 也可使用回调 function 的方式。

posted by hustcc almost 2 years ago

我发现这个方案有个问题,就是没有 encode color 方便。因为不同的图,它要设置的 style 不一样。我要针对不同的图,写不同的 style。比如,柱图就要 .style('fill', 'red'),不同 shape 还要额外判断。但 encode 的这个方案就很直接。

哦哦哦,我写错了 .style('stroke', 'red') 而不是 .style('color', 'red')

不理解是什么意思,style 也可使用回调 function 的方式。

首先,当前这个方案是可以解决散点图的问题的。 我的想法是如果能支持设置 encode('color', 'red') 就更好了,不用考虑具体的图形。因为,柱图的颜色是体现在 style.fill 上,散点是 style.stroke。设置 style 要考虑不同的图形的差异。不支持也没事,作为调用方我只能自行处理了。

posted by Deathsteps almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests