antvis/G2

[v5]: 1. tooltip 没显示 2. legend 无法点击切换显隐 #4438

Valar103769 posted onGitHub

demo: https://g2.antv.antgroup.com/examples/general/line/#line-basic

/**
 * A recreation of this demo: https://observablehq.com/@d3/line-chart
 */
import { Chart } from '@antv/g2';

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


const data = [

    {
        "hour": "2022-12-03 00",
        "new_recharge_orders": 29,
        "recharge_orders": 864,
        "total_row": false,
        "xField": "00",
        "series": "2022-12-03"
    },
    {
        "hour": "2022-12-09 00",
        "new_recharge_orders": 19,
        "recharge_orders": 715,
        "total_row": false,
        "xField": "00",
        "series": "2022-12-09"
    },



]


        chart
          .line()
          .data(data)
          .encode('x', 'xField')
          .encode('y', 'new_recharge_orders')
          .encode('color', 'series')
          .axis('x', {
            title: '时间',
          })
          .interaction({
            type: 'tooltip',
          })
        chart.render()


  1. tooltip 没有显示的是因为需要配置到 chart 对象上,如下配置就好了:
chart.interaction({ type:'tooltip' }) 
  1. legend 无法控制显示和隐藏是因为:在这个版本中,这个交互还没有实现。这个功能会在下周发布的 beta.4 中添加,详见这个 PR:https://github.com/antvis/G2/pull/4415
posted by pearmini over 2 years ago

行吧,那我没问题了

posted by Valar103769 over 2 years ago

@Valar103769 看你最近开始用了,方便加个联系方式嘛,看我主页~

posted by hustcc over 2 years ago

@Valar103769 看你最近开始用了,方便加个联系方式嘛,看我主页~

卧槽, 不会又只有我一个人在用吧?

posted by Valar103769 over 2 years ago

@Valar103769 看你最近开始用了,方便加个联系方式嘛,看我主页~

加你微信了,anyplot是吧

posted by Valar103769 over 2 years ago
  1. tooltip 没有显示的是因为需要配置到 chart 对象上,如下配置就好了:
chart.interaction({ type:'tooltip' }) 
  1. legend 无法控制显示和隐藏是因为:在这个版本中,这个交互还没有实现。这个功能会在下周发布的 beta.4 中添加,详见这个 PR:feat: add legendFilter #4415

话说完全记不住哪些不能配置在.line()下, 能不能把除了render的其他属性chart方法, 比如interaction, 在new chart的时候传入吗? 或者支持line().interaction?

posted by Valar103769 over 2 years ago
  • 第一种思路是可行,G2 新版本可以根据用一个 JavaScript Object 去渲染图表,但是目前这个能力还没有在文档透出,可以看看这个在线的 demo
// 现在也应该可以如下使用,只不过文档没有透出。

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

const chart = new Chart({
  type: 'line',
  data,
  encode: {
    x: 'xField',
    y: 'new_recharge_orders',
    color: 'series',
  },
  axis: {
    x: { title: '时间' },
  },
  interactions: [{ type: 'tooltip' }],
});

chart.render();
  • 第二个也是可行,这个我来跟进一下。
posted by pearmini over 2 years ago

嗯, 其实不想用配置对象, 不好封装, 改个属性还得背下来,他在哪个属性下,还是api的方式简单

posted by Valar103769 over 2 years ago

这里看了一下,目前的交互是和图表绑定的,所以 line.interaction 暂时没有办法支持,需要使用 chart.interaction。但是现在有考虑将交互和每一个标记绑定,如果之后这样改了,那么就可以使用 line.interaction

posted by pearmini over 2 years ago

line.interactive.bind(chart) 行不行

posted by Valar103769 over 2 years ago

嗯嗯,实现是没有问题的。但是不支持的原因和实现没有关系,主要希望透出的概念清晰:交互是属于整个图表的,而不是属于某个标记的。

posted by pearmini over 2 years ago

哦哦, 那就别改了, 控制台加个警告吧,提示下我们

posted by Valar103769 over 2 years ago

哦哦哦,是的,这个地方应该警告报错才对,我去改一下。

posted by pearmini over 2 years ago

Fund this Issue

$0.00
Funded

Pull requests