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 2022/03/14 07:59:45 UTC
[GitHub] [echarts] Ovilia opened a new issue #16675: [Bug] AxisPointer snapping
Ovilia opened a new issue #16675:
URL: https://github.com/apache/echarts/issues/16675
### What problem does this feature solve?
# The Problem
In the current implementation, axisPointer snaps to the nearest data for different axis separately. This may cause the snapped data to be far away from the mouse position and lack the flexibility to configure which value to snap to for series like candlestick.
#11684 was trying to fix this but there were still some consensus required and was closed because too much conflicts. And this issue is going to discuss more details about it.
# Case Studies
## Case 1: two `snap: true` axes
For coordinates having two axes like rectangular coordinates and polar coordinates, the Cartesian distance should be compared to calculate the nearest data. If coordinates have two `snap: true` axes, it should snap to the data with the smallest Cartesian distance.
For example, in current implementation, [this scatter chart](https://echarts.apache.org/examples/en/view.html?c=scatter-nutrients-matrix&edit=1&reset=1&version=5.3.0), the snapped points are those of the same x and y value with the mouse position, but they are in fact quite far away from the mouse position.
A better snapping policy would be to snap the nearest point to the mouse position because the user's attention is more focus on the position near the mouse point (especially for this case because the mouse position is also the center of the cross of the axisPointer).
Line series with both `'value'` axes can be considered the same as this case.
Axes with `type: 'cagetory'` should be treated as if they have been set `snap: true` implicitly.
### Proposed API
```js
xAxis: {
axisPointer: {
snap: true
}
},
yAxis: {
axisPointer: {
snap: true
}
}
```
## Case 2: one `snap: true` axis but fix to data
Developers should be given the ability to snap the xAxis and use the corresponding y value to snap yAxis to. In this case, it means the axisPointer cross should be displayed at `['Tue', 230]` instead of `['Tue', 135]`.
### Proposed API
```js
xAxis: {
axisPointer: {
snap: true
}
},
yAxis: {
axisPointer: {
snap: 'data'
}
}
```
## Case 3: series with multiple dimension data
There are cases where there are **multiple dimensions** in one piece of data, e.g., candlestick series, boxplot series, custom series and so on. The series should have the ability to define which dimension to be used to snap. We might also provide the ability for developers to override the default policy of the series.
### Proposed API
```js
xAxis: {
axisPointer: {
snap: true
}
},
yAxis: {
axisPointer: {
snap: 'data.close' // 'close' is a dimension name in the dataset
}
}
```
## Case 4: multiple series
For **multiple series** situations, e.g., two line series sharing the same `xAxis`, developers should be provided the ability to choose between *snapping to a certain series* (similar to the case of candlestick series) or *snapping to the nearest series* (like [this highcharts demo](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/bordercolor-default/).
### Proposed API
```js
xAxis: {
axisPointer: {
snap: true
}
},
yAxis: {
axisPointer: {
snap: 'firstSeries.data.close' // 'firstSeries' is a series name
}
}
```
## Misc
`axisPointer` of coordinates other than cartesian may require more test cases. For example, polar axes don't support snapping and the axisPointer always look like this no matter where the mouse position is.
<img width="566" alt="b4efcd87bcd33a40020f46cb0" src="https://user-images.githubusercontent.com/779050/158115998-80506801-d981-492e-915a-75ea1f2d3d3d.png">
### What does the proposed API look like?
```js
xAxis: {
axisPointer: {
snap: true // or 'data', 'data.close', 'firstSeries.data.close'
}
}
```
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on issue #16675: [Feature] AxisPointer snapping
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #16675:
URL: https://github.com/apache/echarts/issues/16675#issuecomment-1066747635
Some ideas:
1. `tooltip.snap` should also be provided. When `axisPointer` is not used like in the case https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering. We can still snap the tooltip to the data.
2. When `tooltip.snap` is enabled. The `axisPointer` will also be snapped automatically.
3. When `tooltip` is not used. `axisPointer.snap` will be used to determine how to snap the axisPointer.
And for the configurations in the proposal. I'd suggest to avoid using access syntax `xxx.xxx` because it's not type friendly and complex to parse. We usually use separate configs.
For example:
To specify the dimension:
```ts
snap: true,
snapDimension: 'close'
```
To specify the series:
```ts
snap: true,
snapSeriesName: 'firstSeries'
snapSeriesIndex: 0
```
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Ovilia commented on issue #16675: [Feature] AxisPointer snapping
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #16675:
URL: https://github.com/apache/echarts/issues/16675#issuecomment-1067502669
@pissang That's great. Thanks for the suggestion! I think I can get on with it and see if more details need to be discussed.
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org