๐ How to obtain the relative position of brush in the coordinate system in the vchart chart library?
๐ก Newskategorie: Programmierung
๐ Quelle: dev.to
Question title
How to obtain the relative position of brush in the coordinate system in the vchart chart library?
Problem description
When I was using the vchart library, I encountered a problem. I listened to the onBrushEnd event and wanted to obtain the relative position of the area selected by the brush in the coordinate system. That is, after I drew a frame on the chart, I wanted to obtain the position range of this area on the x/y axis. I tried all the methods I could think of, but did not find the corresponding data.
Solution
According to the design and usage of vchart, currently the vchart API does not directly provide this information, but it is still possible to obtain this necessary information through some other means. The specific steps are as follows:
- Use vchart.getAllComponents () to find the brush component
- In the brush component, there is a property called _brushComponent. AABBBounds , which is the relative position of the checkbox in the region.
- Similarly, with the vchart.getAllComponents () method, we can find the components for the x and y axes.
- In the found axis component, we can use the _scale .invert (position) method to convert the position of AABBBounds obtained in the previous step to specific values on the x and y axes.
In order to prevent a very small position shift when the user clicks and accidentally triggers the brush drawing, we can also set a sizeThreshold property for the brush. This property means the checkbox size threshold, which literally means the minimum size of the box you need to draw. The brush event will only be triggered when the size of the box is greater than this threshold.
Related Documents
- VChart sizeThreshold configuration item: https://www.visactor.io/vchart/option/barChart#brush.sizeThreshold
- VChart github๏ผhttps://github.com/VisActor/VChart