钉钉小程序 AntV-f2 图表无法横向滚动

官方示例: https://f2-v3.antv.vision/zh/examples/column/column#pan
直接将这个示例搬到了钉钉小程序里，但是无法横向平移，查了两个小时，最后在issue中找到解决方法

1. 加载交互行为 pan 和滚动条 ScrollBar

import ScrollBar  from '@antv/f2/lib/plugin/scroll-bar';
import Pan from '@antv/f2/lib/interaction/pan';

2. 在 onInitChart 函数中注册 interaction 与 ScrollBar

	  F2.Chart.registerInteraction('ddpan', Pan);	// 注册 interaction
      const chart = new F2.Chart({
        ...config,
        pixelRatio: dd.getSystemInfoSync().pixelRatio,
        plugins: ScrollBar	// 注册插件 ScrollBar
      })

3. 定义 interation、定义滚动条

	// 定义进度条
	chart.scrollBar({
	  mode: 'x',
	  xStyle: {
	    backgroundColor: '#e8e8e8',
	    fillerColor: '#808080',
	    offsetY: -2
	  }
	});
	// 定义平移交互
	chart.interaction('ddpan');

全部代码：

import F2 from "@antv/f2";
import ScrollBar from '@antv/f2/lib/plugin/scroll-bar';
import Pan from '@antv/f2/lib/interaction/pan';

const data = [
  { name: 'aaa', total: 90, },
  { name: 'bbb', total: 85 },
  { name: 'ccc', total: 80 },
  { name: 'ddd', total: 75 },
  { name: 'eee', total: 70 },
  { name: 'fff', total: 65 },
  { name: 'ggg', total: 60 },
  { name: 'hhh', total: 90, },
  { name: 'iii', total: 85 },
  { name: 'jjj', total: 80 },
  { name: 'kkk', total: 75 },
  { name: 'lll', total: 70 },
  { name: 'mmm', total: 65 },
  { name: 'nnn', total: 60 },
]
const colorArr = ['#74DEB3', '#739FFB', '#7585A2', '#F7C63B', '#EB7F65']

Component({
  mixins: [],
  data: {

  },
  props: {},
  onload() {
  },
  methods: {
    onInitChart(F2, config) {

      F2.Chart.registerInteraction('ddpan', Pan);
      const chart = new F2.Chart({
        ...config,
        pixelRatio: dd.getSystemInfoSync().pixelRatio,
        plugins: ScrollBar
      })

      const originX = [];
      const originY = [];
      data.map(function (obj, index) {
        obj.color = colorArr[index % colorArr.length]
        if (index < 5) {
          originX.push(obj.name);
          originY.push(obj.total);
        }

      });

      chart.source(data, {
        name: {
          tickCount: 5,
          values: originX,
        },
        total: {
          tickCount: 5
        }
      });
      chart.scale('total', {
        min: 0,
        ticks: [0, 20, 40, 60, 80, 100],
      });
      chart.axis('name', {
        tickLine: {
          length: 4,
          stroke: '#cacaca'
        },
        label: {
          fill: '#cacaca'
        },
        line: {
          top: true
        }
      });

      chart.tooltip({
        showItemMarker: false,
        background: {
          radius: 2,
          padding: [3, 5]
        },
        onShow: function onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].title;
          items[0].value = items[0].value + '% ';
        }
      });
      chart.interval().position('name*total').style({
        radius: [4, 4, 0, 0]
      }).size(10);

      // 定义进度条
      chart.scrollBar({
        mode: 'x',
        xStyle: {
          backgroundColor: '#e8e8e8',
          fillerColor: '#808080',
          offsetY: -2
        }
      });
      chart.interaction('ddpan');
      chart.render();
      return chart
    },
  }
})

参考: https://github.com/antvis/F2/issues/938