The issue has been closed

[V5] ScrollBar 提供设置在可视区域内最多展示几条 mark 的能力 #5557

HoneyPecanPie posted onGitHub

G2 Version: 5.1.2
Platform:
Mini Showcase(like screenshots):
CodePen Link:

据官网文档，ScrollBar 可设置 ratio 决定滚动条比例，但当数据量较大时，会出现 mark 相互遮盖的情况，样式不美观：

bar

希望能设置可见区域内最多展示 mark 的个数

确实可以考虑，可以和这个问题一起优化：https://github.com/antvis/G2/issues/5237

posted by pearmini over 1 year ago

试了试，好像没有遇见重叠的问题：

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

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

chart.options({
  type: 'interval',
  data: Array.from({ length: 200 }, (_, i) => ({
    y: Math.random(),
    x: `${i}`,
  })),
  encode: {
    x: 'x',
    y: 'y',
  },
  scrollbar: { x: true },
});

chart.render();

最大值功能可以如下实现：

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

const maxCount = 10;
const ratio = 0.5;

const data = Array.from({ length: 40 }, (_, i) => ({
  y: Math.random(),
  x: `${i}`,
}));

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

chart.options({
  type: 'interval',
  data: data,
  encode: {
    x: 'x',
    y: 'y',
  },
  scrollbar: {
    x: {
      ratio: Math.min(ratio, maxCount / data.length),
    },
  },
});

chart.render();

posted by pearmini over 1 year ago

暂时先关闭，如果有问题再打开。

posted by pearmini over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

[V5] ScrollBar 提供设置在可视区域内最多展示几条 mark 的能力 #5557

Company

Community

Support

Connect