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 · 2 comments

Comments

Projects
None yet
2 participants
@Mijago

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

This comment has been minimized.

Show comment
Hide comment
@100pah

100pah Jan 11, 2017

Member

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.

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 100pah added the enhancement label Jan 11, 2017

@100pah

This comment has been minimized.

Show comment
Hide comment
@100pah

100pah Apr 5, 2017

Member

This feature has been supported in v3.5.

Member

100pah commented Apr 5, 2017

This feature has been supported in v3.5.

@100pah 100pah closed this Apr 5, 2017

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