Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating two independend Tooltips with different triggers in one chart instance. #4905

Closed
Mijago opened this issue Jan 11, 2017 · 5 comments
Closed

Comments

@Mijago
Copy link

Mijago commented Jan 11, 2017

One-line summary [问题简述]

Creating two independend Tooltips with different triggers in ONE chart instance.

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: 3.3.2
  • Browser version [浏览器类型和版本]: Chrome Version 55.0.2883.95 (64-bit)
  • OS Version [操作系统类型和版本]: MacOS 10.9.5

Expected behaviour [期望结果]

I need one tooltip for the scatter chart that triggers on item, and one tooltip that triggers on axis (for the second xAxis and yAxis).

The problem: If I add a tooltip that triggers on axis, it fires also in the scatter chart.
Is there any option to limit a tooltip to one axis without splitting the second diagram out of the chart instance (into another)?

ECharts option [ECharts配置项]

// In the Original, there is also a Pie and Sankey chart (in the lower right corner).
// These are not needed for this example.
// But please keep in mind that they also need a tooltip (trigger item)


var grids = [
	{x: "7%", y: "5%", width: "45%", height: "90%"},
	{x: "55%", y: "5%", width: "41%", height: "45%"}
];

var xAxes = [
	{
		"gridIndex": 0,
		"type"     : "value",
		"name"     : "Kasse",
		"min"      : 0
	},
	{
		"type"       : "category",
		"gridIndex"  : 1,
		"boundaryGap": true,
		"name"       : "Datum",
		"axisTick"   : {
			"alignWithLabel": true
		},
		"data"       : []
	}
];

var yAxes = [
	{
		"gridIndex"   : 0,
		"type"        : "value",
		"nameLocation": "end",
		"name"        : "Privat",
		"min"         : 0
	},
	{
		"type"     : "value",
		"gridIndex": 1,
		"name"     : "Anzahl"
	}
];

var toolBox = {
	"show"   : true,
	"orient" : "vertical",
	"feature": {
		"dataZoom"   : {
			"show" : true,
			"title": {
				"zoom": "Zoom",
				"back": "Zurückst."
			}
		},
		"restore"    : {
			"show" : false,
			"title": "Wiederherst."
		},
		"saveAsImage": {
			"show" : true,
			"title": "Speichern"
		},
		"magicType"  : {
			"show" : false,
			"title": {
				"line"  : "Linie",
				"bar"   : "Balken",
				"stack" : "Stapel",
				"tiled" : "Getrennt",
				"force" : "Graph",
				"chord" : "Chord",
				"pie"   : "Kreis",
				"funnel": "Trichter"
			},
			"type" : []
		}
	}
};


var seriesData_scatter = [];
var seriesData_line_kv = [];
var seriesData_line_pk = [];

for (var i = 1; i < 20; i++) {

// Generate sample data: Scatter
	seriesData_scatter.push([
		Math.floor(Math.random() * 20),
		Math.floor(Math.random() * 20),
		i
	]);

	// Generate sample data: Line KV and Line PK
	seriesData_line_kv.push(Math.floor(Math.random() * 20));
	seriesData_line_pk.push(Math.floor(Math.random() * 20));
	// The other two series are just the average lines of the both above and as such not needed in this example.
}


var series = [
	// For the Scatter-Chart
	{
		"type"     : "scatter",
		"itemStyle": {
			"normal": {
				"opacity"      : 1,
				"shadowBlur"   : 2,
				"shadowOffsetX": 0,
				"shadowOffsetY": 0,
				"shadowColor"  : "rgba(0, 0, 0, 1)"
			}
		},
		"data"     : seriesData_scatter
	},
	// For the Line-Chart
	{
		"name"      : "Kasse",
		"data"      : seriesData_line_kv,
		"itemStyle" : {
			"normal": {
				"color": "#B55A00"
			}
		},
		"type"      : "bar",
		"xAxisIndex": 1,
		"yAxisIndex": 1
	},
	{
		"name"      : "Privat",
		"data"      : seriesData_line_pk,
		"itemStyle" : {
			"normal": {
				"color": "#D27E20"
			}
		},
		"type"      : "bar",
		"xAxisIndex": 1,
		"yAxisIndex": 1
	},
	{
		"type"      : "line",
		"smooth"    : "true",
		"name"      : "Durchschnitt (Kasse)",
		"data"      : [],
		"itemStyle" : {
			"normal": {
				"lineStyle": {
					"color": "#832B00"
				}
			}
		},
		"xAxisIndex": 1,
		"yAxisIndex": 1
	},
	{
		"type"      : "line",
		"smooth"    : "true",
		"name"      : "Durchschnitt (Privat)",
		"data"      : [],
		"itemStyle" : {
			"normal": {
				"lineStyle": {
					"color": "#E2B143"
				}
			}
		},
		"xAxisIndex": 1,
		"yAxisIndex": 1
	}
];

var graphic_nodes = {
	"elements": [
		{
			"type"  : "text",
			"left"  : "60%",
			"top"   : "0px",
			"cursor": "default",
			"style" : {
				"text"     : "Some Title",
				"textAlign": "left"
			}
		}
	]
};

var legend = {
	"show"  : true,
	"orient": "horizontal",
	"top"   : "53%",
	"left"  : "55%",
	"data"  : [
		"Kasse",
		"Durchschnitt (Kasse)",
		"Privat",
		"Durchschnitt (Privat)"
	]
};

var dataZoom = {
	"show"      : true,
	"realtime"  : true,
	"start"     : 0,
	"end"       : 100,
	"xAxisIndex": [
		1,
		1
	],
	"gridIndex" : 1,
	"y"         : "51%",
	"height"    : 15
};



var tooltip = {
    // Now, what to do here, that I get one tooltip for each chart?
    // One has to be trigger = item and one has to be trigger = axis
    // Problem: If I use an array of tooltips, both are fired everytime
};

option = {
	animationThreshold     : 200,
	animationDurationUpdate: 250,
	animationDuration      : 1000,
	animation              : true,

	calculable: true,
	stack     : false,

	dataZoom: dataZoom,
	graphic : graphic_nodes,
	legend  : legend,
	toolbox : toolBox,
	grid    : grids,
	xAxis   : xAxes,
	yAxis   : yAxes,
	tooltip : tooltip,
	series  : series
};

Other comments [其他信息]

http://gallery.echartsjs.com/editor.html?c=xHyHQDKmLx&v=1

@100pah
Copy link
Member

100pah commented Jan 11, 2017

I've made some modifications in the demo http://gallery.echartsjs.com/editor.html?c=xHyHQDKmLx&v=2, where tooltip settings are added to each series that needs `trigger: 'axis'.
It seems to work, although there is some work to do to improve the trigger behavior.

@100pah
Copy link
Member

100pah commented Apr 5, 2017

This feature has been supported in v3.5.

@100pah 100pah closed this as completed Apr 5, 2017
@jbadilla
Copy link

jbadilla commented Feb 14, 2019

How is it supported exactly? How can I use both a tooltip for the axis, as well as a different one when I hover over individual items?

@dileepyelleti
Copy link
Contributor

dileepyelleti commented Aug 27, 2019

I also need this behaviour for my line chart to show tooltips with triggers axis(hover on chart) and item(hover on exact point). I am using echars version 4.2.1.
@100pah I don't think this issue was raised for showing different tooltips for different series. It is to show different tooltips one on hover on point, and another on hover any other place.

@yufeng04
Copy link
Contributor

yufeng04 commented Aug 28, 2019

It is not currently supported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants