How does Axure make a dynamic rose cake?

In data visualization chart, rose chart is one of the common chart types. Through the display of rose diagram, we can observe the data more clearly. Rose diagram is often used for data visualization analysis. It can make the data more impressive through color charts. Because there is no rose diagram in Axure's built-in library, this tutorial mainly introduces how to make a high-fidelity dynamic rose pie diagram. Remarks: Provide professional and systematic Axure self-study video lessons for friends who are preparing to study Axure and are studying Axure. The knowledge points of video teaching are clear and easy to master quickly ~

Click to watch the video tutorial

Axure tutorial on making dynamic rose cake map;

First, after the completion of production, it should have the following effects.

Automatically generate a corresponding rose diagram according to that table data;

When loading, the system automatically completes the effect of dynamic generation of rose diagram;

When the mouse moves to the corresponding sector, you can view the specific data.

Second, the production materials and interaction This case takes six fan-shaped rose diagrams as an example. All production materials adopt Axure natural materials, including the following materials. 1. table is used to record the name and specific data of each plate, which is needed for subsequent operations, so it is best to name each grid to facilitate the selection of subsequent variables. 2. When creating a new text label for the maximum text, you need to fill in the maximum data value in the table. For example, the maximum data value in the above table is 200. This label is only used for logical calculation and can be hidden by default. Later, you will automatically draw a rose diagram from these data. 3. You can choose a sector by right-clicking the rectangle to change its shape, then adjust the angle to about 60 degrees, copy six sectors, place them and set different colors. In this case, the default width and height of the sector is 200. When loading each sector, we need to shrink the sector to a smaller area first, and then enlarge it slowly, so as to make a dynamic effect. The specific interaction is as follows: 1) Set the reduced size-set the sector size as the current width and height divided by 20, with the anchor point as the center. 2) Wait-wait for 500 seconds. Note here that in order to have a continuous dynamic effect, the first one will wait 500 milliseconds, the second one will wait 1000 milliseconds, and so on. 3) Set the enlargement size-set the width to, the data/maximum value corresponding to the table * his width * 20; Set the height to the data/maximum value corresponding to table * his height *20. Because it has been reduced by 20 times before, the width or height multiplied by 20 is to restore the original shape, and then the ratio obtained by dividing the table data by the maximum value represents the ratio of its size on the original basis. For example, the data in table 1 is 200, the maximum value is 200 and the ratio is 1, so it is still the width and height of 200; Table 2 is 190, and the ratio is 19/20, so its width and height become 190, and so on. Note that changing the size requires adding an animation effect. We choose linear animation, and the time is 1000s. 4. Use polylines and text labels to make polylines and text into the shapes shown below, and combine the polylines and text labels corresponding to each sector into groups one by one, which are hidden by default. We don't want to do repetitive work, but we want to get the data directly from the table, so we add interaction when loading the polyline text: set the text-divide it into two parts, the previous data part is the data corresponding to the table, and the latter percentage = the data corresponding to the table/the sum of table data * 100. Considering the inexhaustible situation, it is still necessary to use a fixed function to keep the decimal point. When each sector is loaded, we will display the polyline data group after the sector animation is completed. The following interactions need to be added: wait- wait 1000 seconds, which is consistent with the enlarged animation time;

Display —— Displays the corresponding polyline combination.

Each sector is set in this way, so you can copy and paste directly, and then change the content appropriately. 5. The label bar on the right passes a rectangle and text, the rectangle is set as a small square, and the label corresponds to the title of each color. Here we also use the interaction of setting text. When loading the title text of the label, set the value of the text to the title text corresponding to the table, so that we only need to fill in the table in the future, and we don't need to fill in the contents repeatedly in the label. 6. The pop-up window of the label is composed of rectangles, adjusted to a suitable size, and the external shadow is selected, which is hidden by default. Later, we will have an interaction and move to the corresponding sector to display the corresponding data. 7. Hot zone Because Axure sees a fan inside, but its space is also square, which leads to the interaction below, and the fan in front will block the fan behind. So here we enclose the fan-shaped position through the hot zone to make a relatively high-fidelity effect. Move the mouse to the hot spot: display- displays the tab pop-up window.

Set text-here we set rich text, because rich text can set different text colors. According to different texts, we set blue texts for blue umbrellas and red texts for red umbrellas. The text content consists of corresponding table title, text data and percentage, in which the text data and percentage are consistent with the set polyline text introduced earlier and can be directly copied and used.

Move the mouse out of the hot spot: hide-hide the tab pop-up window. When the mouse moves, we make an interaction that the tag follows the mouse: Move-set the tag to pop up and move to the absolute position, with x coordinate =Cursor.x+ 10 and y coordinate =Cursor.y+ 10. Cursor.x represents the current x coordinate of the mouse, and Cursor.y represents the current y coordinate of the mouse. The above is about "How does Axure make a dynamic rose pie chart?" I hope I can help you ~! More Axure prototype skills, all in Axure related articles! Many small partners choose to learn Axure online, but many of them are patchwork learning, which may be different from the actual operation ~ so it is better to learn Axure systematically! Axure's self-study video class is believed to give you knowledge and hands-on experience ~ recommend popular courses.

AxureRP Prototype Drawing Zero-based Getting Started Quickly Mastering Sketch +Axure Mobile Alipay APP Design Practical Tutorial AxureAPP Only Selected Interactive Design Tutorial Axure E-commerce APP Shopping Cart Interactive Case Tutorial