这个菜鸟花几个小时写的 DEMO 竟被码云推荐上首页 ?

站长

发表文章数:4245

linux之samba使用

写在最前

    没有接触过 AntV 的诸位看客可通过这篇不成文的文章稍作了解。最近 病毒猖獗,遂抽空做了一个相关小 DEMO。数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成型,使用与 Vue 配合较好的 Vant 最为UI框架以节约时间。此文以一个小小的示例(渲染能够横向滚动的图表),来填沧海一粟之坑,也算是入门。因为博客园常有神出没,故作此引以节约贵神时间,大神请出门左转。如有雅致对鄙人指点一番亦感激不尽!

思路

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

1.Interaction

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

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

2.ScrollBar

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

引入 F2

1.使用 ScrollBar 文档中这样写:

使用NetBenchmark压测TCP,HTTP和Websocket服务

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,
});

2.使用 pan 文档中这样写:

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

// ... 创建 chart 实例

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

接下来你对比我后面的写法, 在vue-cli中要灵活变动,特别是在路径方面。

数据结构

数据结构:

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

开始

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

这里引入 index 就够了,注意我的写法( 引入 F2 from 后面的路径,而不是直接 ‘@antv/f2’ ),官方文档所说的还需要引入 scroll barpan。如果 pan 需要在使用 vue-cli 时引入肯定像这样 import pan from "@antv/f2/lib/interaction/pan",那么如何使用 pan 这个变量 ?

不成功

  1. 下面是不成功的例子,如果你不是吃瓜群众,可以直接通过文章目录跳转到 成功
  2. 为什么要放出来,因为我搞得是柱状图,看官方文档柱状图的 例子 搞的没搞出来。
      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 并不是我们想要显示的横坐标,转换思路,在给它使用类似取别名的方式转换过来就可以了。

这个菜鸟花几个小时写的 DEMO 竟被码云推荐上首页 ?

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

项目地址

【故障公告】再次遭遇SQL语句执行超时引发网站首页访问故障

未经允许不得转载:www.xssyun.com作者:站长, 转载或复制请以 超链接形式 并注明出处 xss云之家-资源网,新人技术交流平台,一个湖北娃的个人博客
原文地址:《这个菜鸟花几个小时写的 DEMO 竟被码云推荐上首页 ?》 发布于2020-02-06

分享到:
赞(0) 生成海报

长按图片转发给朋友

投稿赚钱
2020年在家赚取零花钱
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册