antvis/G2

滚动条滚动之后tooltip等交互失效 #5650

KuduroJS posted onGitHub

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

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

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  })
  .encode('x', 'letter')
  .encode('y', 'frequency')
  .axis('y', { labelFormatter: '.0%' })
  .scrollbar("x");

chart.render();

demo初始有tooltip交互,拖动滚动条后,tooltip失效。


这个问题已经修复了:https://github.com/antvis/G2/pull/5632 ,可以试试 5.1.6-beta.0 这个版本。

posted by pearmini over 1 year ago

@pearmini 更新到5.1.6-beta.0测试是可以的,感谢。但出现了另一个问题,当设置scale的时候会error,以及滚动失效。

demo如下:

/**
 * A recreation of this demo: https://vega.github.io/vega-lite/examples/bar_grouped_repeated.html
 */
import { Chart } from '@antv/g2';

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

chart.data({
  type: 'fetch',
  value: 'https://assets.antv.antgroup.com/g2/movies.json',
});

chart
  .interval()
  .transform({ type: 'groupX', y: 'sum' })
  .axis('y', { labelFormatter: '~s' })
  .axis('x', { labelTransform: 'rotate(90)' })
  .encode('x', 'Major Genre')
  .encode('y', 'Worldwide Gross')
  .encode('series', () => 'Worldwide Gross')
  .encode('color', () => 'Worldwide Gross')
  .tooltip({ channel: 'y', valueFormatter: '~s' })
  .scale('y', {
    key: "left", // 设置这里滚动会失效
    domainMin: 0,
    domainMax: 1,
    clamp: true
  })
  .scrollbar("x", {});

chart.render();
posted by KuduroJS over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests