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.

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

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

2.Adjust its shape and size and add color.

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.

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

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.

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.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store