BizCharts Version:bizcharts@4.1.11Platform:Chrome如题,文档中给出的竖向滚动条如何配置?
https://bizcharts.net/gist/30HrOhJ14D5
umuewwlo1#
碰到同样的需求。是否存在基于 effect 自己封装组件的可能性?https://g2.antv.vision/zh/docs/api/general/scrollbar
igsr9ssn2#
如果不使用 plot - BarChart。
可以使用 Effects 调用 g2 的 api 开启 scrollbar
<Chart height={500} data={data} autoFit scale={scale}> <Coordinate transpose={true} reflect="y" /> <Interval position="x*y" size={14} color="biz" /> <Legend /> <Interaction type="active-region" /> {/* <Interaction type="element-highlight" /> */} {/* <Interaction type="view-zoom" /> */} <Effects> {(chart) => { chart.option("scrollbar", { type: "vertical" }); }} </Effects> </Chart>
https://bizcharts.net/product/BizCharts4/category/62/page/77#chart-%E7%9A%84%E5%AE%9E%E4%BE%8B%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B9%E6%B3%95%E5%8F%AF%E4%BB%A5%E8%B0%83%E7%94%A8
sxpgvts33#
antvis/G2#3605
升级 g2 至 4.1.36 后支持鼠标滚动。
<Chart height={500} data={data} autoFit scale={scale}> <Coordinate transpose={true} reflect="y" /> <Interval position="x*y" size={14} color="biz" /> <Legend /> <Interaction type="active-region" /> <Effects> {(chart) => { chart.interaction("plot-mousewheel-scroll"); chart.option("scrollbar", { type: "vertical", // enableMouseWheel: true, // not working.. }); }} </Effects> </Chart>
3条答案
按热度按时间umuewwlo1#
碰到同样的需求。
是否存在基于 effect 自己封装组件的可能性?
https://g2.antv.vision/zh/docs/api/general/scrollbar
igsr9ssn2#
如果不使用 plot - BarChart。
可以使用 Effects 调用 g2 的 api 开启 scrollbar
https://bizcharts.net/product/BizCharts4/category/62/page/77#chart-%E7%9A%84%E5%AE%9E%E4%BE%8B%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B9%E6%B3%95%E5%8F%AF%E4%BB%A5%E8%B0%83%E7%94%A8
sxpgvts33#
antvis/G2#3605
升级 g2 至 4.1.36 后支持鼠标滚动。