BizCharts GroupedBarChart/BarChart是否支持竖向滚动条,API文档中给出的interactions 添加scrollbar不生效

llmtgqce  于 2022-11-02  发布在  其他
关注(0)|答案(3)|浏览(276)

BizCharts Version:bizcharts@4.1.11
Platform:Chrome
如题,文档中给出的竖向滚动条如何配置?

https://bizcharts.net/gist/30HrOhJ14D5

umuewwlo

umuewwlo1#

碰到同样的需求。
是否存在基于 effect 自己封装组件的可能性?
https://g2.antv.vision/zh/docs/api/general/scrollbar

igsr9ssn

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

sxpgvts3

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>

相关问题