仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图（包含买卖点、自定义标签等，注释详尽）

大家好，这次使用的是AntV的蚂蚁数据可视化F2框架，类似于蚂蚁基金的效果,包含买卖点、自定义标签等，代码如下：
F2框架参考网址：https://antv-f2.gitee.io/zh/examples/line/multiple#customize-tootlip
可以进入该网址，直接复制下方代码进行调试或观察。
效果图如下：

<canvas id="container"></canvas>

import F2 from '@antv/f2';const data = [
{date: '2017-06-05', "type": "沪深300",value: 6.6
}, {date: '2017-06-06', "type": "沪深300",value: 7.9
}, {date: '2017-06-07', "type": "沪深300",value: 8.5
}, {date: '2017-06-08', "type": "沪深300",value: 3.6
}, {date: '2017-06-09', "type": "沪深300",value: 2.3
}, {date: '2017-06-10', "type": "沪深300",value: 3.5
}, {date: '2017-06-11', "type": "沪深300",value: 2.3
}, {date: '2017-06-12', "type": "沪深300",value: 1.8
}, {date: '2017-06-13', "type": "沪深300",value: 4.2
}, {date: '2017-06-14', "type": "沪深300",value: 8.0
}, {date: '2017-06-15', "type": "沪深300",value: 19.5
}, {date: '2017-06-16', "type": "沪深300",value: 8
}, {date: '2017-06-17', "type": "沪深300",value: 8.5
}, {date: '2017-06-18', "type": "沪深300",value: 5.1
}, {date: '2017-06-19', "type": "沪深300",value: 16.9
}, {date: '2017-06-20', "type": "沪深300",value: 9.6
}, {date: '2017-06-21', "type": "沪深300",value: 2.7
}, {date: '2017-06-22', "type": "沪深300",value: 10.8
}, {date: '2017-06-23', "type": "沪深300",value: 3.5
}, {date: '2017-06-24', "type": "沪深300",value: 7.4
}, {date: '2017-06-25', "type": "沪深300",value: 8.1
}, {date: '2017-06-26', "type": "沪深300",value: 10.6
}, {date: '2017-06-27', "type": "沪深300",value: 8.4
}, {date: '2017-06-28', "type": "沪深300",value: 7.3
}, {date: '2017-06-29', "type": "沪深300",value: 5.5
}, {date: '2017-06-30', "type": "沪深300",value: 6.3
},{date: '2017-06-05', "type": "本基金",value: 11.6
}, {date: '2017-06-06', "type": "本基金",value: 12.9
}, {date: '2017-06-07', "type": "本基金",value: 13.5
}, {date: '2017-06-08', "type": "本基金",value: 8.6
}, {date: '2017-06-09', "type": "本基金",value: 7.3
}, {date: '2017-06-10', "type": "本基金",value: 8.5,buyFlag: "B"
}, {date: '2017-06-11', "type": "本基金",value: 7.3,buyFlag: "B"
}, {date: '2017-06-12', "type": "本基金",value: 6.8,buyFlag: "B"
}, {date: '2017-06-13', "type": "本基金",value: 9.2,buyFlag: "B"
}, {date: '2017-06-14', "type": "本基金",value: 13.0,buyFlag: "S"
}, {date: '2017-06-15', "type": "本基金",value: 24.5,buyFlag: "B"
}, {date: '2017-06-16', "type": "本基金",value: 13,buyFlag: "B"
}, {date: '2017-06-17', "type": "本基金",value: 11.5,buyFlag: "S"
}, {date: '2017-06-18', "type": "本基金",value: 11.1,buyFlag: "B"
}, {date: '2017-06-19', "type": "本基金",value: 30.9,buyFlag: "B"
}, {date: '2017-06-20', "type": "本基金",value: 20.6,buyFlag: "S"
}, {date: '2017-06-21', "type": "本基金",value: 13.7,buyFlag: "S"
}, {date: '2017-06-22', "type": "本基金",value: 12.8,buyFlag: "S"
}, {date: '2017-06-23', "type": "本基金",value: 8.5,buyFlag: "B"
}, {date: '2017-06-24', "type": "本基金",value: 9.4,buyFlag: "S"
}, {date: '2017-06-25', "type": "本基金",value: 7.1,buyFlag: "B"
}, {date: '2017-06-26', "type": "本基金",value: 10.6,buyFlag: "B"
}, {date: '2017-06-27', "type": "本基金",value: 8.4,buyFlag: "B"
}, {date: '2017-06-28', "type": "本基金",value: 9.3,buyFlag: "B"
}, {date: '2017-06-29', "type": "本基金",value: 8.5,buyFlag: "B"
}, {date: '2017-06-30', "type": "本基金",value: 7.3,buyFlag: "B"
}]
//如果出现本基金和其他对比曲线重叠的情况，需要凸显本基金在最上面，建议将本基金的数据放在所有类型数据的最后面，即可实现/*如果有多个买入点，那么默认只给第一个买入点添加标签；如果有多个卖出点，那么默认只给最后一个卖出点添加标签
需要筛选出本基金所有数据中，最早的买入点和最晚的卖出点
*/
var buyArr=[{date: '2017-06-10', "type": "本基金",value: 8.5,buyFlag: "B"
}]
var saleArr=[{date: '2017-06-24', "type": "本基金",value: 9.4,buyFlag: "S"
}]//为买卖点添加标签的公共方法，不建议此种写法（这里仅为了测试调试使用），建议单独抽离成一个方法
function addTag(buyArr=[],myChart,type=1){try {for (let i = 0; i < buyArr.length; i++) {//下面为特殊点添加标签（可以是买卖点，或者是最新的数据点）myChart.guide().tag({position: [ buyArr[i].date, buyArr[i].value ],withPoint: false,//是否使用pointStyle点的样式，使用后位于标签的该点将会由下方的样式，自定义显示,默认不自定义content: (type=='1'?"买入":"卖出"),//标签的内容，一般为买入或卖出offsetX: 14,//X轴的偏移值offsetY: -10,//Y轴的偏移值side: 0,//右下角的箭头的大小，设置0可以隐藏,该值默认等于4color: '#FFFFFF',//标签内的字体颜色background: {//设置背景padding: 2,//标签小方块的内间距radius: 2,//标签小方块的圆角fill: (type=='1'?'#E63A38':'#136BB5')//标签小方块的背景填充颜色},pointStyle: {//点的样式fill: (type=='1'?'#E63A38':'#136BB5'),//填充色r: 5,//半径lineWidth: 1,//线条宽度stroke: (type=='1'?'#E63A38':'#136BB5')//触点的颜色}});if(i>0){//因为买卖点的标签只有一个，所以超出直接结束循环break}}} catch (error) {console.log(error,"为图表添加标签失败")}
}const myChart = new F2.Chart({id: 'container',pixelRatio: window.devicePixelRatio,padding: [45, 'auto', 'auto']
});myChart.source(data, {value: {tickCount: 5,min: 0,formatter: function formatter(val) {return val.toFixed(2) + '%';}},date: {type: 'timeCat',range: [0, 1],tickCount: 3}
});myChart.axis('date', {label: function label(text, index, total) {const textCfg = {};if (index === 0) {textCfg.textAlign = 'left';} else if (index === total - 1) {textCfg.textAlign = 'right';}return textCfg;}
});
myChart.axis('value', {label: function label(text, index, total) {const textCfg = {};if (index === 0) {textCfg.textBaseline = 'bottom';} else if (index === total - 1) {textCfg.textBaseline = 'top';}return textCfg;}
});myChart.tooltip({custom: true, // 是否自定义 tooltip 内容框alwaysShow: false,showXTip: true,showYTip: true,snap: true,showCrosshairs: true,//显示XY辅助线triggerOn: ['touchstart', 'touchmove'],triggerOff: ['touchend'],crosshairsType: 'xy',//XY辅助线，可单独设置x或ycrosshairsStyle: {//辅助线样式lineDash: [2]},tooltipMarkerStyle: {//提示语样式stroke: "#136BB5",//触点颜色fill: "#fff",//字体颜色},xTipBackground: { fill: "#136BB5" },//X轴提示背景色yTipBackground: { fill: "#136BB5" },onShow: (obj) => {obj.items.reverse()let temp = []obj.tooltipMarkerCfg.items.forEach(item => {if (item.name == "本基金") {temp.push(item)}})obj.tooltipMarkerCfg.items = temp}
});//曲线的配置
myChart.line({ connectNulls: true }).position('date*value').shape("smooth").size('type', type => {return (type == "本基金" ? 2 : 1)//这里给本基金的曲线加粗，突出于其他比较的曲线
}).color('type', type => {if (type == "本基金") {return "#136BB5"} else if (type == "沪深300") {return "#FF6E20"} else {return "#136BB5"}
});//下面开始进行买卖点的配置，注意只在本基金曲线上显示对应的买卖点
myChart.point().position('date*value').size('type*buyFlag', function (type, buyFlag) {return (type == "本基金" && buyFlag) ? 3 : 0;//设置本基金买卖点的大小}).style('type*buyFlag', {fill: function fill(type, val) {if (type == "本基金" && val === "B") {//买return '#F35830';} else if (type == "本基金" && val === "S") {//卖return '#518DF8';} else {return 'transparent'//注意：当不是买卖点时，建议设置成透明色，避免默认颜色的干扰}},stroke: function (type, val) {//设置点的填充颜色if ((type == "本基金" && val === "B") || (type == "本基金" && val === "S")) {return '#fff';} else {return 'transparent'//注意：当不是买卖点时，建议设置成透明色，避免默认颜色的干扰}},lineWidth: 1,//设置线的宽度});//添加买入、卖出的标签
if(buyArr&&(Object.prototype.toString.call(buyArr) == "[object Array]") && buyArr.length){addTag(buyArr,myChart,1)
}
if(saleArr&&(Object.prototype.toString.call(saleArr) == "[object Array]") && saleArr.length){addTag(saleArr,myChart,2)
}
myChart.render();

仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图（包含买卖点、自定义标签等，注释详尽）相关推荐

仿蚂蚁金服AntV框架蚂蚁数据可视化F2条形图、柱状图（注释详尽）
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/examples/bar/basic# ...
仿蚂蚁金服AntV框架蚂蚁数据可视化F2饼图（注释详尽）
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/examples/pie/donut# ...
echart 数据点可以加链接吗_地理可视化就这么简单、酷炫，蚂蚁金服AntV 空间数据可视化引擎 L72.0发布...
导读 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架.L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供 ...
蚂蚁金服 AntV 开源地理可视化引擎 L7 2.0 发布
导读 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架.L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供 ...
蚂蚁金服通信框架SOFABolt解析 | 协议框架解析
2019新春支付宝红包技术大揭秘在线峰会将于03-07日开始,点击这里报名届时即可参与大牛互动. SOFA Scalable Open Financial Architecture 是蚂蚁金服自主研发 ...
蚂蚁金服烈元：蚂蚁网络代理演进之路
2019 年 10 月 27 日,又拍云联合 Apache APISIX 社区举办 API 网关与高性能服务最佳实践丨Open Talk 杭州站活动,蚂蚁金服技术专家烈元做了题为<蚂蚁金服网络代 ...
蚂蚁金服通讯框架学习一
前言互联网领域的通信技术,有各式各样的通信协议可以选择,比如基于 TCP/IP 协议簇的 HTTP(1/2).SPDY 协议.WebSocket.Google 基于 UDP 的 QUIC 协议等 ...
刚刚，蚂蚁金服荣膺“中国金融大数据领军企业”称号
小蚂蚁说: 2018中国软件和信息服务领域十大领军企业.人物及产业园区评选活动是业界最权威和最受关注的评选之一.12月20日,在北京举行的"2018中国软件大会"正式宣布蚂蚁金服 ...
中国人自己的框架——蚂蚁金服RPC框架结构分析
蚂蚁金服近期开源了研发多年的SOFA一篮子框架,其中就有一个非常核心的RPC框架,它叫SOFA-BOLT.小编今天花了近一天的时间仔细阅读研究它的源码,阅读过程中遇到了不少问题,蚂蚁金服的相关技术人员 ...

仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图（包含买卖点、自定义标签等，注释详尽）

仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图（包含买卖点、自定义标签等，注释详尽）相关推荐

最新文章

热门文章