¿Cómo hacer un pastel de rosas dinámico con Axure?

En los gráficos de visualización de datos, el gráfico de rosas es uno de los tipos de gráficos más comunes. A través de la visualización del gráfico de rosas, puede observar los datos con mayor claridad. Los gráficos de rosas se utilizan a menudo para el análisis de visualización de datos. Puede hacer que los datos sean más impresionantes con gráficos coloridos. Debido a que no hay un gráfico de rosas en la biblioteca integrada de Axure, este tutorial presenta principalmente cómo crear un gráfico circular de rosas dinámico de alta fidelidad. Nota: Se ofrecen cursos en vídeo de autoaprendizaje profesional y sistemático de Axure para amigos que se están preparando para aprender Axure y aquellos que actualmente están aprendiendo Axure. Los puntos de conocimiento que enseñan en vídeo son claros y fáciles de dominar rápidamente~

Haga clic para ver el vídeo tutorial

Tutorial de Axure sobre cómo crear gráficos circulares de rosas dinámicos;

1 Una vez completada la producción, debería haber los siguientes efectos.

El gráfico de rosas correspondiente se genera automáticamente en función de los datos de la tabla;

Al cargar, el sistema completa automáticamente el efecto de generar dinámicamente el gráfico de rosas;

Cuando el mouse se mueve al área del ventilador correspondiente, puede ver datos específicos.

2. Materiales de producción e interacción. Este caso utiliza como ejemplo seis diagramas de rosas en forma de abanico. Todos los materiales de producción son materiales naturales de Axure, incluidos los siguientes. 1. La tabla se utiliza para registrar el nombre y los datos específicos representados por cada sección, que se utilizarán en operaciones posteriores, por lo que es mejor nombrar cada cuadrícula para facilitar la selección de variables posteriores. 2. Al crear una nueva etiqueta de texto para el texto máximo, debe completar el valor de datos máximo en la tabla. Por ejemplo, el valor máximo de datos en la tabla anterior es 200. Esta etiqueta sólo se utiliza para cálculos lógicos y se puede ocultar de forma predeterminada. Más tarde, dibujará automáticamente un gráfico de rosas a partir de estos datos. 3. Puede seleccionar un sector haciendo clic derecho en el rectángulo para cambiar su forma, luego ajustar el ángulo a aproximadamente 60 grados, copiar los seis sectores, colocarlos y establecer diferentes colores. En este caso, el ancho y alto predeterminados de los sectores son 200. Al cargar cada sector, primero debemos reducir el sector a un área más pequeña y luego ampliarlo lentamente para crear un efecto dinámico. Las interacciones específicas son las siguientes: 1) Establecer el tamaño reducido: establezca el tamaño del ventilador en el ancho y alto actuales divididos por 20, con el punto de anclaje como centro. 2) Espere - espere 500 segundos. Tenga en cuenta aquí que para tener un efecto dinámico continuo, el primero esperará 500 milisegundos, el segundo esperará 1000 milisegundos, y así sucesivamente. 3) Establezca el tamaño ampliado: establezca el ancho en los datos/valor máximo correspondiente a la tabla * su ancho * 20; establezca la altura en los datos/valor máximo correspondiente a la tabla * su altura * 20; Debido a que se ha reducido 20 veces antes, multiplicar el ancho o el alto por 20 es restaurar la forma original, y luego la proporción obtenida al dividir los datos de la tabla por el valor máximo representa la proporción de su tamaño original. Por ejemplo, los datos en la Tabla 1 son 200, el valor máximo es 200 y la proporción es 1, por lo que el ancho y el alto siguen siendo 200. La Tabla 2 es 190 y la proporción es 19/20, luego su ancho y alto; convertirse en 190, y así sucesivamente. Tenga en cuenta que cambiar el tamaño requiere animación. Elegimos animación lineal y el tiempo es 1000s. 4. Utilice la polilínea y la etiqueta de texto para hacer que la polilínea y el texto tengan la forma que se muestra en la figura siguiente, y agrupe la polilínea y la etiqueta de texto correspondientes a cada sector en un grupo uno por uno, oculto de forma predeterminada. No queremos hacer un trabajo repetitivo, pero queremos obtener datos directamente de la tabla, por lo que agregamos interacción al cargar el texto de polilínea: establezca el texto: divídalo en dos partes, la parte de datos frontal son los datos correspondientes a tabla, y el siguiente porcentaje =Datos de la tabla correspondiente/suma de datos de la tabla*100. Teniendo en cuenta la situación de uso infinito, todavía es necesario utilizar una función fija para conservar el punto decimal. A medida que se carga cada sector, mostraremos el grupo de datos de polilínea después de que se complete la animación del sector. Es necesario agregar las siguientes interacciones: esperar: esperar 1000 segundos, de acuerdo con el tiempo de animación ampliado;

Mostrar: mostrar la combinación de polilínea correspondiente.

Cada sector está configurado así, puedes copiar y pegar directamente, y luego cambiar el contenido apropiadamente. 5. La barra de etiquetas de la derecha usa un rectángulo y texto. El rectángulo está configurado como un cuadrado pequeño y la etiqueta corresponde al título de cada color. Aquí también utilizamos la interacción de configurar texto.

Al cargar el texto del título de la etiqueta, establezca el valor del texto en el texto del título correspondiente a la tabla, de modo que solo necesitemos completar el formulario en el futuro y no necesitemos completar repetidamente el contenido de la etiqueta. . 6. La ventana emergente de la etiqueta consta de un rectángulo, ajústelo al tamaño apropiado, seleccione la sombra exterior y ocúltela de forma predeterminada. Posteriormente realizaremos una interacción y nos desplazaremos al sector correspondiente para desplegar los datos correspondientes. 7. Zona caliente: Axure ve una forma de abanico en el interior, pero su espacio también es cuadrado, lo que lleva a la siguiente interacción: el abanico del frente bloqueará la forma del abanico de atrás. Entonces aquí usamos zonas calientes para rodear las posiciones en forma de sector para crear un efecto de fidelidad relativamente alta. Mueva el mouse al punto de acceso: pantalla: muestra la ventana emergente de etiqueta.

Establecer texto: aquí configuramos texto enriquecido, porque el texto enriquecido puede establecer diferentes colores de texto. Según los diferentes textos, los dividimos en paraguas azules con texto azul y paraguas rojos con texto rojo. El contenido del texto consta del título de la tabla correspondiente, los datos de texto y el porcentaje. Los datos de texto y el porcentaje son consistentes con la configuración del texto de polilínea introducida anteriormente y se pueden copiar y usar directamente.

Mueva el mouse fuera de la zona activa: Ocultar: oculta la ventana emergente de la etiqueta. Cuando el mouse se mueve, creamos una etiqueta para seguir la interacción del mouse: Mover: configura la etiqueta para que aparezca y se mueva a la posición absoluta, coordenada x = Cursor.x 10, coordenada y = Cursor.y 10. Cursor.x representa la coordenada x actual del mouse y Cursor.y representa la coordenada y actual del mouse. Lo anterior trata sobre "¿Cómo hacer un gráfico circular de rosas dinámico en Axure?". ¡Espero que pueda ayudarte ~! Para obtener más consejos sobre creación de prototipos de Axure, consulte los artículos relacionados con Axure. Muchos amigos eligen aprender Axure en línea, pero muchos de ellos lo aprenden poco a poco, y lo que aprenden puede ser diferente de la operación real ~ ¡así que es mejor aprender Axure sistemáticamente! Creo que los cursos en vídeo de autoaprendizaje de Axure pueden brindarle conocimientos y experiencia práctica ~ Cursos populares recomendados.

Una introducción de base cero al diagrama del prototipo de AxureRP para dominar rápidamente el boceto. Tutorial práctico sobre el diseño de la aplicación Alipay móvil de AxureAPP.