AntV F2 数据可视化填坑，图表横向滚动

柱状图横向滚动

思路

通过 Interaction 实现平移，通过 ScrollBar 显示滚动条

1.Interaction

F2 提供一套交互机制，以达到通用交互行为的封装和复用。基于此机制，我们提供了以下五种通用的交互行为：

• 饼图选中
• 柱状图选中
• 图表平移 pan
• 图表缩放
• 图表 swipe 快扫

2.ScrollBar

Scroll bar 是一个静态插件，主要用于辅助 pan 和 pinch 交互。 滚动条只是为 pan 服务的。

数据结构

数据结构：

[
  {
    provinceShortName: "北京",
    index: 0,
    confirmedCount: 168
  },
  //...
]

引入 F2

import F2 from "@antv/f2/lib/index";

不成功

1. 下面是不成功的例子，如果你不是吃瓜群众，可以直接通过文章目录跳转到 成功
2. 为什么要放出来，因为我搞得是柱状图，看官方文档柱状图的例子搞的没搞出来。
3. 可以横向滚动了，但是当横坐标只显示刚开始定义的 originProvinces, 想着动态改变 originProvinces，鼓捣半天发现不知道在什么地方触发。如果您知道原因，欢迎指教！

      // 通过横坐标定义初始显示的数据，剩余的数据通过滑动显示（好像是不对的）
      const originProvinces = ["浙江","广东","台湾","江苏","内蒙古","云南"];

      const chart = new F2.Chart({
        id: "province-trend",
        // plugins: [ScrollBar],  通过 import 引入不需要在这里注册了
        pixelRatio: window.devicePixelRatio
      });

      chart.source(data, {
        provinceShortName: {
          type: "cat",  // 数值类型
          tickCount: 5,
          values: originProvinces  // 对应上面
        },
        confirmedCount: {
          tickCount: 5
        }
      });

      chart
        .interval()
        .position("provinceShortName*confirmedCount")
        .color("provinceShortName");

      chart.tooltip({
        showItemMarker: true,
        background: {
          radius: 2,
          padding: [3, 5]
        },
        onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].title;
          items[0].value = items[0].value + " 人";
        }
      });

      chart.interaction("pan");

      chart.scrollBar({
        xStyle: {
          backgroundColor: "#e8e8e8",
          fillerColor: "#808080",
          offsetY: -2
        }
      });

      chart.render();

成功

官方还给了另一个个横向滚动的 例子，不过是折线图的，只能硬着头皮上了，仿照官方折线图滚动的例子改成如下：

 const chart = new F2.Chart({
        id: "province-trend",
        pixelRatio: window.devicePixelRatio
      });

      chart.source(data, {
        index: {  // 这里横坐标使用 index，
          min: 0, // 设置刚开始显示的区间 0-5
          max: 5
        }
      });

      chart.tooltip({
        showCrosshairs: false,
        showItemMarker: false,
        background: {
          radius: 2,
          fill: "#1890FF",
          padding: [3, 5]
        },
        nameStyle: {
          fill: "#fff"
        },
        onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].title;
        }
      });

      // 这里横坐标应该显示的是 provinceShortName,
      // 但是用这种方法必须使用 index 了
      // 后面在将横坐标使用类似于起别名的方式改成 provinceShortName
      chart.interval().position("index*confirmedCount");

      chart
        .point()
        .position("index*confirmedCount")
        .style({
          lineWidth: 1,
          stroke: "#fff"
        });

      chart.axis("index", {
        label(text) {
          return {
            fontSize: 14,
            // 在这里将横坐标显示为 provinceShortName
            text: data[text].provinceShortName
          };
        }
      });

      chart.interaction("pan");

      chart.scrollBar({
        mode: "x",
        xStyle: {
          offsetY: -5
        }
      });

      chart.render();

大功告成了，这里只放了关键代码，其他细节再优化。 仅仅实现图表滚动，是不是稍微有点麻烦 ？