资讯专栏INFORMATION COLUMN

第一次使用AntV中的F2

livem / 3178人阅读

摘要:开始使用项目开发,我写的是折线面积图滑动下载直接引入就开始画图创建指定开始绘制对数据源格式的要求,仅仅是数组,数组的每个元素是一个标准对象。

数据可视化插件——AntV

AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践

平常开发中大家都会接触一些数据可视化工具,常用的echarts,Highcharts,D3等。
个人觉得AntV的UI好看一些,再加上F2是移动端可视化方案,所以就有了接下来的爬坑过程。

开始使用

vue项目开发,我写的是折线面积图+滑动

下载

</>复制代码

  1. npm install @antv/f2 --save
  2. 直接引入就ok
  3. const F2 = require("@antv/f2");

开始画图
创建canvas,指定id

</>复制代码

开始绘制

</>复制代码

  1. // F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
  2. const data = [
  3. { genre: "Sports", sold: 275 },
  4. { genre: "Strategy", sold: 115 },
  5. { genre: "Action", sold: 120 },
  6. { genre: "Shooter", sold: 350 },
  7. { genre: "Other", sold: 150 },
  8. ];
  9. // Step 1: 创建 Chart 对象
  10. const chart = new F2.Chart({
  11. id: "myChart",
  12. pixelRatio: window.devicePixelRatio // 指定分辨率
  13. });
  14. // Step 2: 载入数据源
  15. chart.source(data);
  16. // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
  17. chart.interval().position("genre*sold").color("genre");
  18. // Step 4: 渲染图表
  19. chart.render();

嘿嘿,都是copy官网的

相关API使用

</>复制代码

  1. 最常用的,毕竟其他的我也不会

Axis-坐标轴配置
这个我主要用来自定义X轴Y轴内容。
就那这个数据来举例吧

</>复制代码

  1. list: [
  2. {"date": "2018-08-08","record": 166},
  3. {"date": "2019-01-01","record": 174},
  4. {"date": "2019-01-02","record": 166},
  5. {"date": "2019-01-03","record": 166},
  6. {"date": "2019-01-05","record": 187},
  7. {"date": "2019-01-06","record": 189},
  8. {"date": "2019-01-17","record": 156},
  9. {"date": "2019-04-18","record": 231}
  10. ]
  11. //date为X轴,record Y轴
  12. chart.axis("date", {
  13. label: function label(text, index, total) {
  14. var cfg = {
  15. textAlign: "center",//定义样式
  16. };
  17. if (index === 0) {
  18. cfg.textAlign = "start";
  19. cfg.text = "+" + text;//可以更改X轴数据格式等
  20. cfg.fill = "#F5222D";//文字颜色
  21. }
  22. if (index > 0 && index === total - 1) {
  23. cfg.textAlign = "end";
  24. }
  25. return cfg;
  26. }
  27. });
  28. //定义X轴Y轴
  29. var defs = {
  30. date: {
  31. type: "timeCat",//类型为日期
  32. mask: "YY/MM/DD",//日期格式
  33. tickCount: 4,//区间,写几就有几个区间
  34. },
  35. record: {
  36. tickCount: 5,
  37. min: 0,//轴的最小值&最大值
  38. alias: "身高"//定义这个轴是啥类型
  39. }
  40. };
  41. chart.source(this.list, defs);//载入数据

tooltip-自定义提示
这一块没有研究透彻,自己看看吧链接

</>复制代码

  1. chart.tooltip(false)//直接关闭,没任何提示
  2. chart.tooltip({
  3. showItemMarker: false,
  4. onShow: function onShow(ev) {
  5. //自定义提示内容
  6. var items = ev.items;
  7. items[0].name = null;
  8. items[0].name = items[0].title;
  9. items[0].value = items[0].value + "%";
  10. }
  11. });

guide

</>复制代码

  1. chart.guide().text({
  2. position: ["min", "max"],
  3. content: "提示",
  4. style: {
  5. textBaseline: "middle",
  6. textAlign: "start"
  7. },
  8. offsetY: -23,
  9. offsetX: -25
  10. });

就是这个东西

线,面积,点

</>复制代码

  1. //先X轴后Y轴
  2. chart.line().position("date*record").color("#FFB024");//线
  3. chart.area().position("date*record").style({fillStyle: "l(90) 0:rgba(255,202,106,1) 1:rgba(255,201,104,0.3)",fillOpacity: 1});//面积渐变色
  4. chart.point().position("date*record").color("red");//点
滑动+滚动条

</>复制代码

  1. 手机上看图,如果X轴数据过多,都堆一起了,所以就用滑动了

</>复制代码

  1. //引入
  2. const ScrollBar = require("@antv/f2/lib/plugin/scroll-bar");
  3. const pan = require("@antv/f2/lib/interaction/pan");
  4. //注册
  5. var chart = new F2.Chart({
  6. id: "myChart",
  7. pixelRatio: window.devicePixelRatio,
  8. plugins: [ScrollBar, pan]
  9. });
  10. //官网用法
  11. //X轴为1955-2015,5年一个区间,载入数据都时候定义一个最大最小都区间
  12. chart.source(data, {
  13. release: {
  14. min: 1990,
  15. max: 2010
  16. }
  17. });
  18. chart.interaction("pan");
  19. // 定义进度条
  20. chart.scrollBar({
  21. mode: "x",
  22. xStyle: {
  23. offsetY: -5
  24. }
  25. });
我的写法

</>复制代码

  1. //因为我们X轴日期格式为2019-01-01这种 换算了一下
  2. 当数据大于五条当时候开始滑动
  3. const a = 1000000000
  4. var dataMap = data.map((item, index) => {
  5. return {
  6. date: index + a,
  7. record: item.record
  8. }
  9. })
  10. var min = a, max = a + 4, tickCount = 5;
  11. if (dataMap.length > 5) {
  12. tickCount = 5;
  13. chart.scrollBar({
  14. mode: "x",
  15. xStyle: {
  16. backgroundColor: "#e8e8e8",
  17. fillerColor: "#808080",
  18. offsetY: -2
  19. }
  20. });
  21. chart.interaction("pan");
  22. }else if(dataMap.length == 1){
  23. max = a;
  24. tickCount = 2;
  25. chart.point().position("date*record").color("#FFB024");
  26. }else{
  27. max = dataMap.length +a -1
  28. tickCount = dataMap.length;
  29. }
  30. chart.source(dataMap,{
  31. date: {
  32. min:min,
  33. max:max,
  34. tickCount:tickCount
  35. }
  36. })
  37. chart.axis("date", {
  38. label: function label(text, index, total) {
  39. const cfg = {
  40. textAlign: "center"
  41. }
  42. cfg.text = data[text-a].date
  43. return cfg;
  44. }
  45. });
结语

第一次发文章,可能不是太好,希望大家喜欢,原谅我不会弄动图,所以没放效果图。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101423.html

相关文章

  • Antv F2的报错解决办法,可解决类似所有Antv F2方法名找不到的问题

    摘要:一句话总结使用代替如果已心领神会,可以关闭该页面啦叨叨叨如下举一个小小例子,例子来源于官方文档使用过程中,需要给饼图配置,官方例子提供的代码如下这时候会发现你的饼图没法像官方例子那样如愿出现,而且报了个错,刚好我也遇到了跟你同样的问题, 一句话总结:使用 import F2 from @antv/f2/lib/index-all; 代替 import F2 from @antv/f2;...

    马龙驹 评论0 收藏0
  • 蚂蚁金服移动端可视化解决方案 F2 3.2 正式发布

    摘要:,一个专注于移动,开箱即用的可视化解决方案,完美支持环境同时兼容多种环境小程序,。专业的移动设计指引为你带来最佳的移动端图表体验。基于,移动端可视化图表库。 showImg(https://segmentfault.com/img/remote/1460000016176811?w=1600&h=440); F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多...

    sydMobile 评论0 收藏0
  • 蚂蚁金服可视化图形语法 G2 3.3 发布:琢·磨

    摘要:更好的阅读体验,请移步语雀是蚂蚁金服数据可视化解决方案的一个子产品,是一套数据驱动的高交互的可视化图形语法。欢迎共建是一套数据驱动的高交互的可视化图形语法。 showImg(https://segmentfault.com/img/remote/1460000016710544); 更好的阅读体验,请移步语雀 G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的...

    TZLLOG 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<