首页 > 其他分享> 文章详细

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

2020-02-03 17:51:53 阅读：880 来源： 互联网

标签：index F2 const items AntV chart 填坑 pan

思路

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

1.Interaction

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

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

2.ScrollBar

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

数据结构

数据结构：

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

引入 F2

使用 ScrollBar 文档中这样写：

const F2 = require('@antv/f2/lib/index');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');

// 注册插件 ScrollBar
F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册

// 或者给具体的 chart 实例注册
const chart = new F2.Chart({
  id: 'canvas',
  plugins: ScrollBar,
});

使用 pan 文档中这样写：

const F2 = require('@antv/f2/lib/index'); // 引入 F2
require('@antv/f2/lib/interaction/pan'); // 引入图表平移交互

// ... 创建 chart 实例

// 调用，需要在 chart.render() 方法之前调用
chart.interaction('pan');

在 vue-cli 中实测并不需要, 只需要在组件中引入 index 即可，

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

这里引入 index 就够了，官方文档所说的还需要引入 scroll bar 和 pan。
如果 pan 需要在使用 vue-cli 时引入的话肯定像这样 import pan from "@antv/f2/lib/interaction/pan"，
那么如何使用 pan 这个变量？

不成功

下面是不成功的例子，如果你不是吃瓜群众，可以直接通过文章目录跳转到成功
为什么要放出来，因为我搞得是柱状图，看官方文档柱状图的例子搞的没搞出来。

      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();

头部定义 originProvinces 通过横坐标定义初始显示的数据，剩余的数据通过滑动显示。
可以横向滚动了，但是当横坐标只显示刚开始定义的 originProvinces, 想着动态改变 originProvinces，鼓捣半天发现不知道在什么地方触发。如果您知道原因，欢迎指教！

成功

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

 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();

这种实现的思路就是不去单独定义刚开始显示的横坐标，而是替换为 index （索引），给它定义一个最初显示的区间。相应的横坐标必须使用 index 了，
但是 index 并不是我们想要显示的横坐标，我们转换思路，在给它使用类似取别名的方式转换过来就可以了。

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

标签：index,F2,const,items,AntV,chart,填坑,pan
来源： https://www.cnblogs.com/guangzan/p/12256553.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

思路

数据结构

引入 F2

不成功

成功