Axis Information for tooltip.axisPointer.label.formatter function #10178

arashdalir · 2019-03-28T14:33:21Z

What problem does this feature solve?

using Echarts v4.2.1

when using tooltip.axisPointer.label.formatter, (usually) there is no information, to which axis the data belongs. this makes it hard to format the value as desired.

Although the documatation talks about each item of the params.seriesData having axis information delivered with them, as shown in the example below, the params.seriesData is empty. this means that it's not possible to find axis information and options.

in our case, we would like to use the same formatter as defined for the axis to be used for axisPointer.label too, so access to axis.axisLabel.formatter is necessary.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="chart1" style="width:1200px"></div>
<script src="echarts.js"></script>
<script type="text/javascript">
	var chart_15537778965c9cc4e81f06e = echarts.init(document.getElementById('chart1'), null, {
		"devicePixelRatio": null,
		"renderer": "canvas",
		"width": null,
		"height": "700px"
	});

	function formatAxisPointerLabel(value)
	{
		var label = value.value;

		if(value.hasOwnProperty('axis'))
		{
			// this is only possible if the proposed solution is in place:
			if(value.axis.model.option.axisLabel.formatter)
			{
				label = value.axis.model.option.axisLabel.formatter.call({}, label);
			}
		}

		return label;
	}

	function formatValue(value, format)
	{
		switch(format)
		{
		case 0:
			value = "x-" + value;
			break;
		case 1:
			value = "y1-" + value;
			break;

		case 2:
			value = "y2-" + value;
			break;
		}

		return value;
	}

	chart_15537778965c9cc4e81f06e.setOption({
		dataset: {
			source: [
				{
					"operator_country": "Te-Ger",
					"count_users": 3,
					"avg_days_per_user": 20.666666666666668
				},
				{
					"operator_country": "Gl-Nig",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Az-Aze",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Be-Kaz",
					"count_users": 1,
					"avg_days_per_user": 19
				}, {
					"operator_country": "El-Fin",
					"count_users": 24,
					"avg_days_per_user": 18.708333333333332
				}, {
					"operator_country": "Al-Leb",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "FL-Bar",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Vi-Vie",
					"count_users": 1,
					"avg_days_per_user": 19
				}, {
					"operator_country": "SK-Sou",
					"count_users": 2,
					"avg_days_per_user": 20
				}, {
					"operator_country": "Or-Mol",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Ch-Tai",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Vo-Ita",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "TI-Bra",
					"count_users": 2,
					"avg_days_per_user": 19
				}, {
					"operator_country": "Si-Sin",
					"count_users": 1,
					"avg_days_per_user": 18
				}, {
					"operator_country": "Vo-Spa",
					"count_users": 13,
					"avg_days_per_user": 18.23076923076923
				}, {
					"operator_country": "Te-Nor",
					"count_users": 6,
					"avg_days_per_user": 15.333333333333334
				}
			]
		},
		"tooltip": {
			"show": true,
			"trigger": "axis",
			"axisPointer": {
				"type": "cross",
				"label": {
					"formatter": function (params){
						return formatAxisPointerLabel(params);
					}
				}
			}
		},
		"xAxis": [
			{
				"show": true,
				"type": "category",
				"axisLabel": {
					"rotate": "45",
					"align": "right",
					"verticalAlign": "top",
					"padding": [0, 15, 0, 0],
					"formatter": function (value){
						return formatValue(value, 0);
					}
				},
				"axisTick": {"alignWithLabel": true},
				"splitArea": {"show": true, "areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
				"min": 0,
				"axisLine": {"lineStyle": {"color": "#999999"}},
				"splitNumber": 10
			}
		],
		"yAxis": [
			{
				"show": true,
				"axisLabel": {
					"color": "#5D4F4F",
					"formatter": function (value){
						return formatValue(value, 1);
					}
				},
				"axisLine": {"lineStyle": {"color": "#5D4F4F"}},
				"offset": 0,
				"type": "value",
				"splitNumber": 10,
				"nameTextStyle": {"fontSize": 14},
				"minInterval": 1,
				"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}}
			},
			{
				"show": true,
				"splitLine": {"show": false},
				"position": "right",
				"type": "value",
				"splitNumber": 10,
				"nameTextStyle": {"fontSize": 14},
				"minInterval": 1,
				"axisLabel": {
					"formatter": function (value){
						return formatValue(value, 2);
					}
				},
				"axisLine": {"lineStyle": {"color": "#999999"}},
				"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}}
			}
		],
		"series": [
			{
				"name": "count_users",
				"type": "bar",
				"yAxisIndex": 0,
				"seriesByLayout": "column",
				"hasValues": true
			},
			{
				"name": "avg_days_per_user",
				"type": "bar",
				"yAxisIndex": 1,
				"seriesByLayout": "column",
				"hasValues": true
			}
		],
		"grid": [
			{
				"show": true,
				"width": "80%",
				"left": "10%",
				"top": "12%",
				"borderColor": "transparent",
				"height": "70%",
				"containLabel": 1
			}
		]
	});
</script>
</body>
</html>

What does the proposed API look like?

I propose a mandatory property for value provided to tooltip.axisPointer.label.formatter, named axis, which contains information about the value's axis. this SHOULD BE AVAILABLE redgardless of params.seriesData.

as a solution, if the following line is added to dist\echarts.js line 68246, (or at src/component/axisPointer/viewHelper.js#L139) one can then access axis options and information. important is that the axis options, specially its formatter are provided.

/**
 * @param {number} value
 * @param {module:echarts/coord/Axis} axis
 * @param {module:echarts/model/Global} ecModel
 * @param {Object} opt
 * @param {Array.<Object>} seriesDataIndices
 * @param {number|string} opt.precision 'auto' or a number
 * @param {string|Function} opt.formatter label formatter
 */
function getValueLabel(value, axis, ecModel, seriesDataIndices, opt) {
    value = axis.scale.parse(value);
    var text = axis.scale.getLabel(
        // If `precision` is set, width can be fixed (like '12.00500'), which
        // helps to debounce when when moving label.
        value, {precision: opt.precision}
    );
    var formatter = opt.formatter;

    if (formatter) {
        var params = {
            value: getAxisRawValue(axis, value),
	        axis:axis,   // <---- this line should be added to the code
            seriesData: []
        };
        each$1(seriesDataIndices, function (idxItem) {
            var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
            var dataIndex = idxItem.dataIndexInside;
            var dataParams = series && series.getDataParams(dataIndex);
            dataParams && params.seriesData.push(dataParams);
        });

        if (isString(formatter)) {
            text = formatter.replace('{value}', text);
        }
        else if (isFunction$1(formatter)) {
            text = formatter(params);
        }
    }

    return text;
}

The text was updated successfully, but these errors were encountered:

echarts-bot · 2019-03-28T14:33:23Z

This issue is not created using issue template so I'm going to close it. 🙊
Sorry for this, but it helps save our maintainers' time so that more developers get helped.
Feel free to create another issue using the issue template.

这个 issue 未使用 issue 模板创建，所以我将关闭此 issue。
为此带来的麻烦我深表歉意，但是请理解这是为了节约社区维护者的时间，以更高效地服务社区的开发者群体。
如果您愿意，可以请使用 issue 模板重新创建 issue。

arashdalir · 2019-03-28T14:39:55Z

@Ovilia

your dumb echarts-bot has closed this issue without considering the fact that using your issue template is not possible, as your issue template sends the infromation using GET method, which fails when one tries to post such a detailed

if you don't believe me, just try it yourself:

and you will get:

arashdalir · 2019-03-28T14:47:48Z

this issue is a duplicate of #10180, I created a new issue as the bot automatically closed this one!

echarts-bot bot added the invalid label Mar 28, 2019

echarts-bot bot closed this as completed Mar 28, 2019

arashdalir mentioned this issue Mar 28, 2019

your issue helper uses GET method instead of POST to create new issues, which doesn't work if you create detailed issues. #10179

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Axis Information for tooltip.axisPointer.label.formatter function #10178

Axis Information for tooltip.axisPointer.label.formatter function #10178

arashdalir commented Mar 28, 2019

echarts-bot bot commented Mar 28, 2019

arashdalir commented Mar 28, 2019

arashdalir commented Mar 28, 2019

Axis Information for tooltip.axisPointer.label.formatter function #10178

Axis Information for tooltip.axisPointer.label.formatter function #10178

Comments

arashdalir commented Mar 28, 2019

What problem does this feature solve?

What does the proposed API look like?

echarts-bot bot commented Mar 28, 2019

arashdalir commented Mar 28, 2019

arashdalir commented Mar 28, 2019