摘要:开始使用项目开发,我写的是折线面积图滑动下载直接引入就开始画图创建指定开始绘制对数据源格式的要求,仅仅是数组,数组的每个元素是一个标准对象。
数据可视化插件——AntV
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践
平常开发中大家都会接触一些数据可视化工具,常用的echarts,Highcharts,D3等。
个人觉得AntV的UI好看一些,再加上F2是移动端可视化方案,所以就有了接下来的爬坑过程。
vue项目开发,我写的是折线面积图+滑动
下载
</>复制代码
npm install @antv/f2 --save
直接引入就ok
const F2 = require("@antv/f2");
开始画图
创建canvas,指定id
</>复制代码
开始绘制
</>复制代码
// F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
{ genre: "Sports", sold: 275 },
{ genre: "Strategy", sold: 115 },
{ genre: "Action", sold: 120 },
{ genre: "Shooter", sold: 350 },
{ genre: "Other", sold: 150 },
];
// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
id: "myChart",
pixelRatio: window.devicePixelRatio // 指定分辨率
});
// Step 2: 载入数据源
chart.source(data);
// Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
chart.interval().position("genre*sold").color("genre");
// Step 4: 渲染图表
chart.render();
嘿嘿,都是copy官网的
相关API使用</>复制代码
最常用的,毕竟其他的我也不会
Axis-坐标轴配置
这个我主要用来自定义X轴Y轴内容。
就那这个数据来举例吧
</>复制代码
list: [
{"date": "2018-08-08","record": 166},
{"date": "2019-01-01","record": 174},
{"date": "2019-01-02","record": 166},
{"date": "2019-01-03","record": 166},
{"date": "2019-01-05","record": 187},
{"date": "2019-01-06","record": 189},
{"date": "2019-01-17","record": 156},
{"date": "2019-04-18","record": 231}
]
//date为X轴,record Y轴
chart.axis("date", {
label: function label(text, index, total) {
var cfg = {
textAlign: "center",//定义样式
};
if (index === 0) {
cfg.textAlign = "start";
cfg.text = "+" + text;//可以更改X轴数据格式等
cfg.fill = "#F5222D";//文字颜色
}
if (index > 0 && index === total - 1) {
cfg.textAlign = "end";
}
return cfg;
}
});
//定义X轴Y轴
var defs = {
date: {
type: "timeCat",//类型为日期
mask: "YY/MM/DD",//日期格式
tickCount: 4,//区间,写几就有几个区间
},
record: {
tickCount: 5,
min: 0,//轴的最小值&最大值
alias: "身高"//定义这个轴是啥类型
}
};
chart.source(this.list, defs);//载入数据
tooltip-自定义提示
这一块没有研究透彻,自己看看吧链接
</>复制代码
chart.tooltip(false)//直接关闭,没任何提示
chart.tooltip({
showItemMarker: false,
onShow: function onShow(ev) {
//自定义提示内容
var items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = items[0].value + "%";
}
});
guide
</>复制代码
chart.guide().text({
position: ["min", "max"],
content: "提示",
style: {
textBaseline: "middle",
textAlign: "start"
},
offsetY: -23,
offsetX: -25
});
就是这个东西
线,面积,点
</>复制代码
//先X轴后Y轴
chart.line().position("date*record").color("#FFB024");//线
chart.area().position("date*record").style({fillStyle: "l(90) 0:rgba(255,202,106,1) 1:rgba(255,201,104,0.3)",fillOpacity: 1});//面积渐变色
chart.point().position("date*record").color("red");//点
滑动+滚动条
</>复制代码
手机上看图,如果X轴数据过多,都堆一起了,所以就用滑动了
</>复制代码
//引入
const ScrollBar = require("@antv/f2/lib/plugin/scroll-bar");
const pan = require("@antv/f2/lib/interaction/pan");
//注册
var chart = new F2.Chart({
id: "myChart",
pixelRatio: window.devicePixelRatio,
plugins: [ScrollBar, pan]
});
//官网用法
//X轴为1955-2015,5年一个区间,载入数据都时候定义一个最大最小都区间
chart.source(data, {
release: {
min: 1990,
max: 2010
}
});
chart.interaction("pan");
// 定义进度条
chart.scrollBar({
mode: "x",
xStyle: {
offsetY: -5
}
});
我的写法
</>复制代码
//因为我们X轴日期格式为2019-01-01这种 换算了一下
当数据大于五条当时候开始滑动
const a = 1000000000
var dataMap = data.map((item, index) => {
return {
date: index + a,
record: item.record
}
})
var min = a, max = a + 4, tickCount = 5;
if (dataMap.length > 5) {
tickCount = 5;
chart.scrollBar({
mode: "x",
xStyle: {
backgroundColor: "#e8e8e8",
fillerColor: "#808080",
offsetY: -2
}
});
chart.interaction("pan");
}else if(dataMap.length == 1){
max = a;
tickCount = 2;
chart.point().position("date*record").color("#FFB024");
}else{
max = dataMap.length +a -1
tickCount = dataMap.length;
}
chart.source(dataMap,{
date: {
min:min,
max:max,
tickCount:tickCount
}
})
chart.axis("date", {
label: function label(text, index, total) {
const cfg = {
textAlign: "center"
}
cfg.text = data[text-a].date
return cfg;
}
});
结语
第一次发文章,可能不是太好,希望大家喜欢,原谅我不会弄动图,所以没放效果图。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101423.html
摘要:一句话总结使用代替如果已心领神会,可以关闭该页面啦叨叨叨如下举一个小小例子,例子来源于官方文档使用过程中,需要给饼图配置,官方例子提供的代码如下这时候会发现你的饼图没法像官方例子那样如愿出现,而且报了个错,刚好我也遇到了跟你同样的问题, 一句话总结:使用 import F2 from @antv/f2/lib/index-all; 代替 import F2 from @antv/f2;...
摘要:,一个专注于移动,开箱即用的可视化解决方案,完美支持环境同时兼容多种环境小程序,。专业的移动设计指引为你带来最佳的移动端图表体验。基于,移动端可视化图表库。 showImg(https://segmentfault.com/img/remote/1460000016176811?w=1600&h=440); F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多...
摘要:更好的阅读体验,请移步语雀是蚂蚁金服数据可视化解决方案的一个子产品,是一套数据驱动的高交互的可视化图形语法。欢迎共建是一套数据驱动的高交互的可视化图形语法。 showImg(https://segmentfault.com/img/remote/1460000016710544); 更好的阅读体验,请移步语雀 G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的...
阅读 2802·2021-09-02 15:11
阅读 945·2019-08-26 18:18
阅读 1910·2019-08-26 11:57
阅读 3367·2019-08-23 16:59
阅读 2035·2019-08-23 16:51
阅读 2348·2019-08-23 16:11
阅读 3179·2019-08-23 14:58
阅读 1143·2019-08-23 11:34