图表滚动条如何配置默认滚动的位置？-灵析社区

博学的学渣

解决方案 Solution 你需要配置表示范围的参数"scrollBar.start"和"scrollBar.end"，它们表示滚动条的起点和终点，取值为"[0, 1]"，表示的该位置所在的百分比布局范围。 除此之外，你还可以通过"scrollBar.startValue"和"scrollBar.endValue"来配置起点和终点，它们分别表示起点和终点的数据值。 https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/6c800191d41f8ff997834b7858a639ad.png 代码示例 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..." (https://link.segmentfault.com/?enc=Ngx8RdB8vAJYDgZim8JS1g%3D%3D.8QNlc%2BfLLaUosrdFonVC0vGJjjU7fraB1dv1nvYgY0OpQ7P%2F5%2BQ0e2vatcMZ1jVumgv6Oqz09B0reZtrKZOffP%2BE0r0S8lpKCBPiPsRHjfU%3D) Online demo："https://www.visactor.io/vchart/demo/scrollbar/scrollbar-speci..." (https://link.segmentfault.com/?enc=hwNxI4D9VifcuMyCoQPcSQ%3D%3D.pmsZXJePXObgHd1pRAplb3OlhLc4sI%2Fi43mFbk4Zef9BxBlSHkAB4so129neDuFOpvvQioASPAuEYC9q7pyjBKBU8PzD8Jn1mif%2BY%2FvGaAQ%3D) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/af39030ad22da13466563d272fd4edcd.png) 相关文档 Related Documentation 滚动条demo："https://www.visactor.io/vchart/demo/scrollbar/scrollbar-speci..." (https://link.segmentfault.com/?enc=wwej%2FR12SWce2yYGVkJ3DA%3D%3D.mSznBTSwrfrKr%2BdgmAdP4FMoM1UJIyuDarsKccDUibeGxqxHZld3xS7hEtkRDwre6hdRji6wkkiMvIbOTUTXDVtRmrhVej0LDh8LAYl4fCA%3D) 滚动条教程："https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc..." (https://link.segmentfault.com/?enc=Kiq9%2BLAMRlKTgHIXiG3TzQ%3D%3D.%2F%2FWSsLfVpivWe2xDgwmLK5Lxq9MqsUcmS9ls8AJNSXOS%2BRvbb9B5fUEuPLzagOhS0VTrX2NNiIyk%2BAyrcZNOrZv8xONDwHzpM6K56gsQimI%3D) 相关api："https://www.visactor.io/vchart/option/barChart#scrollbar.orient" (https://link.segmentfault.com/?enc=%2F%2Fc%2BoMh1UaYMqTjzBBaPdQ%3D%3D.7%2FAWFmC1FnBCG56ubDQj3w9r7ZTzJFReZpmOEwo5COzVbcu85TGWO4rxOSqqyn4HWKPrXCUD1SQ%2Baa4wL%2FCIsw%3D%3D) github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=zwSTGB0cUjfAuw1%2FccR8Bw%3D%3D.IpjA74aSepOgcOOyuRYpLHSZDm6iEYKDLnBBGiWL07Rk6KWNJOvQjCI95KW%2FQ%2B6k)