在小程序中，柱图数据过多时，如何配置横向滚动条？

Question

在飞书小程序中使用VChart时，柱图数据过多时，如何配置横向滚动条？

Answer 1

https://www.visactor.io/vchart/demo/scrollbar/basic-scrollbar...

或者使用dataZoom

https://www.visactor.io/vchart/example

Answer 2

解决方案 Solution

同PC端，配置scrollBar即可，通常而言，你还需要配置表示scrollBar位置的属性scrollBar.orient以及表示当前视窗范围的属性scrollBar.start和scrollBar.end。

代码示例 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 }
      ]
    }
  ],
  xField: 'year',
  yField: 'sales',
  scrollBar: [
    {
      orient: 'bottom',
      start: 0,
      end: 0.5,
      roam: true
    }
  ]
};

相关文档 Related Documentation

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

滚动条教程：https://www.visactor.io/vchart/guide/concepts/scrollbar

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

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