You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2019/03/28 14:46:08 UTC
[GitHub] [incubator-echarts] arashdalir opened a new issue #10180: Axis
Information for tooltip.axisPointer.label.formatter function
arashdalir opened a new issue #10180: Axis Information for tooltip.axisPointer.label.formatter function
URL: https://github.com/apache/incubator-echarts/issues/10180
### Version
4.2.1
### What problem does this feature solve?
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](https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.axisPointer.label.formatter) 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.
```html
<!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](https://github.com/apache/incubator-echarts/blob/fbb47dd8058ca03cc2e3fe3e0e42c1ebf51fa155/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.
```javascript
/**
* @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;
}
```
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org