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.
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.
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