图表滚动条如何配置默认滚动的位置？

Question

当我需要配置滚动条默认滚动的位置的时候我该怎么做？有时我希望滚动条的起点和终点是我所指定的，而并非一个默认范围。

Answer 1

解决方案 Solution

你需要配置表示范围的参数scrollBar.start和scrollBar.end，它们表示滚动条的起点和终点，取值为[0, 1]，表示的该位置所在的百分比布局范围。

除此之外，你还可以通过scrollBar.startValue和scrollBar.endValue来配置起点和终点，它们分别表示起点和终点的数据值。

代码示例 Code Example

代码参考 Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { year: '2000', sales: 22 },
        { year: '2001', sales: 13 },
        { year: '2002', sales: 25 },
        { year: '2003', sales: 29 },
        { year: '2004', sales: 38 },
        { year: '2005', sales: 49 },
        { year: '2006', sales: 58 },
        { year: '2007', sales: 29 },
        { year: '2008', sales: 78 },
        { year: '2009', sales: 19 },
        { year: '2010', sales: 23 },
        { year: '2011', sales: 20 },
        { year: '2012', sales: 98 },
        { year: '2013', sales: 49 },
        { year: '2014', sales: 28 }
      ]
    }
  ],
  direction: 'horizontal',
  yField: 'year',
  xField: 'sales',
  scrollBar: [
    {
      orient: 'right',
      startValue: '2011',
      endValue: '2014',
      roam: true
    }
  ]
};

结果展示 Results

在线效果参考：https://www.visactor.io/vchart/demo/scrollbar/scrollbar-speci...

Online demo：https://www.visactor.io/vchart/demo/scrollbar/scrollbar-speci...

相关文档 Related Documentation

滚动条demo：https://www.visactor.io/vchart/demo/scrollbar/scrollbar-speci...

滚动条教程：https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc...

相关api：https://www.visactor.io/vchart/option/barChart#scrollbar.orient

github：https://github.com/VisActor/VChart

Answer 2

使用js控制滚动的范围

container.addEventListener('scroll', (event) => {
  // 控制在滚动容器内滚动时的行为
  if (event.target.scrollTop >= 100) {
    event.target.scrollTop = 100;
  } else if (event.target.scrollTop <= 0) {
    event.target.scrollTop = 0;
  }
});