You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2019/12/18 21:21:41 UTC
[GitHub] [incubator-echarts] 100pah opened a new issue #11869: More powerful
data filter by legend / visualMap
100pah opened a new issue #11869: More powerful data filter by legend / visualMap
URL: https://github.com/apache/incubator-echarts/issues/11869
Consider these scenarios:
# ScenarioA: series filter
In some monitoring systems, we offen see that there are so many line-series in one chart that the legend items are too many to be checked. That might be resolved some other data visualization design. But in lots of cases it is not practical. And the component "visualMap" can do this but it can only interfere the "visual" of graphic elements rather than "remove" some of them to re-layout or change the extent of the axes, which is necessary to dig into the data in some case.
So it will be good if "multiple legends" can take responsibility on filtering series or data.
For scenarioB, check this example for example: https://gallery.echartsjs.com/editor.html?c=xeSoAEHBI&v=1
But the usage in the example is too complicated, containing code on event listening and dummy series. It is necessary to simplify it.
The ideal solution for ScenarioA migth be:
```js
// ExampleA: use multiple legend to fitler series.
option = {
dataset: {
source: [
// x ySer0, ySer1, ySer2, ySer3, ySer4, ySer5, ySer6
['2015-02', 12.3, 32, 44, 31, 12, 91, 32],
['2015-03', 33.1, 55, 77, 34, 35, 92, 14],
['2015-04', 39.3, 31, 34, 31, 61, 97, 56],
['2015-05', 44.1, 31, 43, 38, 15, 95, 12],
['2015-06', 12.4, 14, 22, 31, 15, 91, 52]
]
},
legend: [
{data: ['X_a', 'X_b', 'yu09']},
{data: ['tagA', 'tagB']},
{data: ['Z1', 'Z4']}
],
xAxis: {type: 'category'},
yAxis: {},
series: [
// The series will be filtered if and only if none of the names in
// `legendNames` exists in the any of the selected legend items.
{type: 'bar', legendNames: ['Z1', 'yu09']},
{type: 'bar', legendNames: ['Z4', 'tagB', 'yu09']},
{type: 'bar', legendNames: ['Z1', 'tagB', 'X_a']},
{type: 'bar', legendNames: ['Z1', 'tagA', 'X_b']},
{type: 'bar', legendNames: ['Z4', 'tagA', 'X_a']},
{type: 'bar', legendNames: ['Z4', 'X_b']}
]
}
```
# ScenarioB: custom series data filter
Suppose we are making a bar or custom series, where each "dataItem" is mapped to a graphic element. If there are so many data items that users need to filter them with user interaction.
Consider this example: https://echarts.apache.org/examples/en/editor.html?c=custom-gantt-flight
If we need to use legend to filter flights. Each legend item represents a criterion. Those criteria might not only be enumerable tags but probably also be some calculable condition like filter the flights earlier than 8:00.
The ideal solution for ScenarioB migth be:
```js
{
legend: {
// By default, only the names in legend data existing in series names nad data
// names will be displayed as a legend graphic item. That makes hard to customize
// the behaviors of legend, where we have to make dummy series as a workaround.
// So I propose to add this new option to force to display all of the names in
// legend data as legend graphic items.
alwaysAll: true,
// This items might not be relevant with each other in there business meanings.
data: ['Daytime', 'Nighttime', 'VIP', 'XX']
},
series: {
type: 'custom',
renderItem: function (api, params) {
var departureTime = api.value(0);
// Add a new API method to get a map to check the legend selection status.
var selected = api.getLegendSelected();
// Similiarly, we probably can ge piecewise visualMap seleteion.
if (selected['Daytime']) {
if (departureTime < 8 || departureTime > 19) {
return;
}
// ...
}
// ...
},
data: [ ... ]
}
}
```
# ScenarioC: filter series data with legend or visualMap
Suppose we have this data:
```js
[
['Switzerland', 'Male', 12.3, 32, 44, 31, 12, 91, 32],
['Switzerland', 'Female', 33.1, 55, 77, 34, 35, 92, 14],
['Switzerland', 'Male', 63.1, 15, 47, 14, 55, 81, 52],
['Austria', 'Female', 39.3, 31, 34, 31, 61, 97, 56],
['Austria', 'Female', 94.1, 31, 43, 38, 15, 95, 12],
['Austria', 'Male', 41.4, 62, 11, 78, 35, 81, 13],
['Liechtenstein', 'Female', 15.4, 14, 22, 31, 15, 91, 52],
['Liechtenstein', 'Male', 11.4, 24, 32, 11, 16, 41, 12]
]
```
And we need to make a scatter chart, "Female" are mapped to green circles and "Male" are mapped to red circles. And "Female" and "Male" should be able to filtered and trigger subsequent change of axis extent.
We can achieve it by make users to split data to two series:
```js
option = {
legend: {},
series: [{
name: 'Male',
data: [
['Switzerland', 'Male', 12.3, 32, 44, 31, 12, 91, 32],
['Switzerland', 'Male', 63.1, 15, 47, 14, 55, 81, 52],
['Austria', 'Male', 41.4, 62, 11, 78, 35, 81, 13],
['Liechtenstein', 'Male', 11.4, 24, 32, 11, 16, 41, 12]
]
}, {
name: 'Female',
data: [
['Switzerland', 'Female', 33.1, 55, 77, 34, 35, 92, 14],
['Austria', 'Female', 39.3, 31, 34, 31, 61, 97, 56],
['Austria', 'Female', 94.1, 31, 43, 38, 15, 95, 12],
['Liechtenstein', 'Female', 15.4, 14, 22, 31, 15, 91, 52]
]
}]
}
```
But it requires a extra workload of data process. Moreover, if we need to make some another filters on country, it is not easy to implement.
Probably the better way is we still use the original data, and make "multiple legend components" enable to filter data. Or we can also make "multiple visualMap components" enable to filter data, that can set customized color visual meanwhile. To achieve this goal, we need to define the two mechanism:
(1) Retrieve the enumrable data values from the given dimension.
(2) Make a customizable `List::filterSlef`.
```js
option = {
dataset: {
source: [
['Switzerland', 'Male', 12.3, 32, 44, 31, 12, 91, 32],
['Switzerland', 'Female', 33.1, 55, 77, 34, 35, 92, 14],
['Switzerland', 'Male', 63.1, 15, 47, 14, 55, 81, 52],
['Austria', 'Female', 39.3, 31, 34, 31, 61, 97, 56],
['Austria', 'Female', 94.1, 31, 43, 38, 15, 95, 12],
['Austria', 'Male', 41.4, 62, 11, 78, 35, 81, 13],
['Liechtenstein', 'Female', 15.4, 14, 22, 31, 15, 91, 52],
['Liechtenstein', 'Male', 11.4, 24, 32, 11, 16, 41, 12]
]
},
legend: [{
// Contry filter
// Auto retrieve names from dimension 0 of each series data.
// And filter data on dimension 0 for each series data.
dimension: 0
}, {
// Sex filter
dimension: 1
}],
series: [{
encode: {
// Add a new syntactic sugar: enable to assign data colors
// by enumerable values in dimension 1. The color will be
// retrieved from pallette, see `dataColor.js`.
color: 1,
x: 2,
y: 3,
tooltip: [0, 1]
}
}]
};
```
# Legend selector (All, Reverse) defect
Another relevant issues needed to be resolved:
should only control one legend component, but not all legend components.
Check the example: https://gallery.echartsjs.com/editor.html?c=xeSoAEHBI&v=1
<!-- 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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org