search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.82k stars 19.63k forks source link

[Feature] Drag and drop scatter point into a quadrant chart #17713

Open zhpeh opened 2 years ago

zhpeh commented 2 years ago

What problem does this feature solve?

I would like to create a quadrant chart with scatter plots that looks something like this where the user is able to dynamically add/remove plots and shift it around the different quadrants (drag-and-drop). The user will also be able to save the absolute positions of the scatter plots which can be re-rendered on page refresh.

Screenshot 2022-09-29 at 9 56 01 AM

I came across this example that allows for dragging of scatter points, was wondering if there are any examples of such a quadrant chart so that I can achieve such a feature?

Thank you!

What does the proposed API look like?

No new API is required, just need some advice on how to create such a quadrant chart.

Ovilia commented 2 years ago

I think this is probably possible with Apache ECharts. We have a demo for draggable charts. As for quadrant chart, this can be easily done with graphic.elements-rect, with which you can draw four rectangles with different colors.

zhpeh commented 2 years ago

Thanks @Ovilia! For the graphic.elements-rect, is there a way I can draw the 4 rectangles such that it is mobile responsive by specifying the relative widths and heights instead of absolute pixels? Also, based on the draggable chart demo, it seems that the setTimeout function overwrites the rectangular rect that I tried to create. Is there a way to prevent this conflict?

helgasoft commented 1 year ago

Similar to #17354, #18385, #16401, #12698. This is achievable with ECharts image See also video clip