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

数据量较大的柱状图加上滚动条后,如何调整柱宽使符合预期 #5442

Closed
KuduroJS opened this issue Aug 22, 2023 · 1 comment

Comments

@KuduroJS
Copy link

示例:
image

按照预期,此时柱宽应是和数据量无关的,不会因数据量变大而变小,滚动显示即可。
类似的问题还有折线图等。

请问怎么解决呢。

示例代码:

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

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

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .scrollbar('x');

chart.render();
@hustcc
Copy link
Member

hustcc commented Aug 22, 2023

需要外置进行计算,根据 x 的数据量,以及画布大小,计算出 scrollbar 的 ratio。

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  .scrollbar('x', { ratio: 0.05 }); // 👈🏻这里

文档见这里:https://g2.antv.antgroup.com/spec/interaction/scrollbar-filter

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