在使用Antv 时候出现interaction 和tooltip 两个配置时候导致tooltip 点击不出来

博主： jiliangliang
发布时间：2020 年 11 月 03 日
1468次浏览
1 条评论
1231字数
分类：建站感悟

var chart = new F2.Chart({
		id: 'mountNode',
		pixelRatio: window.devicePixelRatio
	});

chart.source(newData, {
		value: {
			tickCount: 5,
			min: 0
		},
		date: {
			//type: 'timeCat',
			range: [0, 1],
			values: values,//使用拖拽要初始化数据
			tickCount: 10
		}
	});
	chart.tooltip({
		custom: true,
		showXTip: true,
		showYTip: true,
		snap: true,
		step:1,

crosshairsType: 'xy',
		crosshairsStyle: {
			lineDash: [2]
		}
	});
	chart.axis('date', {
		label: function label(text, index, total) {
			//console.log(text)
			var textCfg = {};
			if (index === 0) {
				textCfg.textAlign = 'left';
			} else if (index === total - 1) {
				textCfg.textAlign = 'right';
			}
			console.log(text)
			return textCfg;
		}
	});

chart.area().position('date*value').color('l(90) 0:#f4c125 1:#f7f7f7');
	chart.line().position('date*value').color('l(90) 0:#f4c125 1:#f7f7f7');

chart.guide().text({
		position: ['min', 'max'],
		content: '水量(ml)',
		offsetY: -15,
	});

chart.interaction('pan',{
		mode: 'x',
		pressTime:300
	});
	// 定义进度条
	chart.scrollBar({
		mode: 'x',
		xStyle: {
			offsetY: -5
		},
		pressTime:300
	});

chart.render();

解决方案 ：设置不同 pressTime 来先后响应

最后修改：2020 年 11 月 03 日 06 : 03 PM

如果觉得我的文章对你有用，请随意赞赏