Axure tutorial: Dynamic Sector Chart

Introduction

statistical chart information is often involved when we draw the prototype at work, especially the background prototype. Now I will introduce in detail how to draw the dynamic sector chart.

Sector Charts

Preview the completed prototype for this tutorial

 

Usage Scenario

The sector chart is generally applicable to the proportion and distribution of various indicators in a dimension. It can visually display the proportion and distribution of various items and the whole, and emphasize the comparison between the whole and individuals. It is suitable for relatively simple proportion diagrams and scenes that do not require accuracy. For example, the proportion of man and woman in a society. It is recommended that no more than 9 pieces of data be used.

Advantage

1. It can clearly show the relationship between the number of each part and the total number.
2. The relationship between the number of each part can be seen intuitively.
3. The area of the sector is used to represent the percentage of the part in the total.

Widgets Setup 

Draw a chart

1.Drag a custom sector chart shape into the canvas.

Sector chart


2.Adjust its shape and size and add color.

Change shape


3. We convert the sector chart into a dynamic panel, double-click the dynamic panel, and then convert the sector chart inside into a dynamic panel again and name it yellow.

Copy dynamic


4. Copy the Yellow sector diagram into multiple dynamic panels and name them according to their own needs. Here I will name them according to the color.

5. After creation, these statistical charts are superimposed together.

Interactions Setup

Interactions setup

1. Click the outermost dynamic panel and set the corresponding rotation angle for the superimposed sector chart in turn to complete a dynamic sector statistical chart.

Final step

2.Finally, in order to make the chart more beautiful, we can add a circle in the middle of the chart. Add a refresh button to reload the current page when clicked.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by hCaptcha and the hCaptcha Privacy Policy and Terms of Service apply.