Axure Promotion · Axure RP · Axure Tutorial · Charts · Intermediate · Learn axure · Jan 18, 2022

Axure Tutorial: Dynamic Rose Chart

by WELLJOE

Introduction

Rose chart is a commonly used analysis chart in data visualization. Through colorful chart forms, the data can be more impressive.
Because there is no rose chart in the default library of Axure RP, this tutorial mainly introduces how to make high-fidelity dynamic rose chart, which is convenient for us to use in the future.

Features to be Realized

1. When the page is loaded, the rose chart plays the animation in clockwise order. The size of the rose chart changes according to the numbers in the table.

2. When the mouse enter the rose chart part, the digital hint follows the mouse and show the hint of the corresponding part; When the mouse moves out, the hint of the corresponding part is hidden.

How to Realize these Features

1. The size of all rose chart parts shall be set according to the proportion of the largest part; When the page is loaded, different parts delay loading animation in clockwise order.

2. When the mouse moves on the page, all hints follow the mouse. And when entering the response part, the hint of this part of the rose chart will be shown, and when moving out of the response part, the hint of this part will be hidden.

Dynamic Rose Chart

Preview the completed prototype for this tutorial

1. Widgets Setup

1. Table

The table is made through a repeater. Of course, you can also make it in other ways.

2. Sector

Drag the sector shape into the canvas, then adjust the angle to 60 degrees, copy 6 fans, place them well and set different colors.

3. Polylines and text

Use polylines and text labels to make them into the shape shown in the image above. Each polyline and text label are combined into a group and hidden by default.

4. Legend

The rectangle is set as a small square, and the label corresponds to the header of each color.

5. Hint text

Make with rectangle, resize, add external shadow, hidden by default. Later, we will make an interaction to move into the corresponding sector to display the corresponding data.

Interactions Setup

1. When each sector is loaded, we need to reduce the sector to a relatively small size, and then slowly enlarge it, so as to make a dynamic effect. When the sector size adjustment is complete, polylines and text are displayed.

1) Set reduced size - set the size of the sector to the current width and height divided by 20, and the anchor point is centered.

2) Wait - wait 500 seconds. Note here that in order to have continuous dynamic effects, the first one needs to wait 500 ms, the second one needs to wait 750 ms, and so on.

3) Set the enlargement size - set the width to the data corresponding to the table / maximum value * width * 20; Set the height to the data / maximum value * height * 20 corresponding to the table.

Because it has been reduced by 20 times before, multiplying the width or height by 20 is to restore the original shape, and then the proportion obtained by dividing the table data by the maximum value represents the proportion of its size on the original basis. For example, the data in Table 1 is 100, the maximum value is also 100, and the ratio is 1, so it is still the width and height of 100; Table 2 is 90, and the ratio is 9 / 10, so its width and height become 90, and so on.

4) When each sector is loaded, we will show the polyline and label group after the sector animation. The following interaction needs to be added:
· Wait - wait 1000 seconds, which is consistent with the enlarged animation time;
· Show - show the corresponding polyline combination.

2. Hot spot

Although the sector is seen in Axure, the space occupied by Axure is also a square, which will cause the front sector to block the back sector during subsequent interaction. So here we surround the sector-shaped position through the hot zone to produce a relatively high fidelity effect.

Hot spot interactions