仿蚂蚁基金效果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/exampl ...
Python数据可视化之折线图
Python数据可视化之折线图提示:前言 Python数据可视化之折线图提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 Python数据可视化之折线图前言一.导入包 ...
Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
python饼状图颜色一样_python数据可视化：折线图、条形图、饼状图显示
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. matplotlib是Python的一个强大的2D图形绘制库,使用需要安装 ...
python数据可视化：折线图、条形图、饼状图显示
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. matplotlib是Python的一个强大的2D图形绘制库,使用需要安装 ...
数据可视化之折线图让数据变得更直观易懂
折线图用于显示随时间或有序类别而变化的趋势,可能显示数据点以表示单个数据值,也可能不显示这些数据点. 折线图是排列在工作表的列或行中的数据可以绘制到折线图中.折线图可以显示随时间(根据常用比例设置)而 ...
R语言数据可视化之折线图、堆积图、堆积面积图
折线图简介折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图本例选用如下测试数据集: 绘制方法是首先 ...

仿蚂蚁基金效果AntV的蚂蚁数据可视化F2折线图、买卖点和自定义标签（注释详尽）

仿蚂蚁基金效果AntV的蚂蚁数据可视化F2折线图、买卖点和自定义标签（注释详尽）相关推荐

最新文章

热门文章