antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

Crosshairs not animated / smooth #2436

MarkLyck posted onGitHub

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前,请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->

I need to display a "crosshar" text with the tooltip.

Here's the code:

chart.tooltip({
    showCrosshairs: true,
    showTitle: false,
    itemTpl: '<li class="chart-tooltip {className}">{value}</li>',
    crosshairs: {
      type: 'x',

      // @ts-ignore
      text: (type: string, defaultText: any) => {
        if (type === 'x') {
          return {
            offset: 5,
            position: 'end',
            content: format(defaultText, 'dd MMM yyyy'),
            style: {
              textAlign: 'center',
              textBaseline: 'top',
              fontSize: 14,
              fontWeight: '500',
              fill: theme.colors.lightGray,
            },
          }
        }
      },
      textBackground: {
        padding: [2, 4],
        style: {
          fill: theme.colors.text,
          opacity: 1,
        },
      },
    },
  })

However, while the tooltip moves smoothly from 1 position to the other. The Crosshair text has no animation. It doesn't move like the tooltip.

Instead it just instantly appears and instantly disappears.

As a user, I would expect the tooltip and the crosshairText to both move smoothly.


We will add this small optimization in version 5.

posted by hustcc over 4 years ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests