Gráfico de anillo

Conceptos básicos

Descarga e instalación

Qlik Sense Desktop

Para instalar la Extension AnyChart Sunburst en Qlik Sense Desktop, haga lo siguiente:

1. Descargue la Extension AnyChart Sunburst para Qlik Sense.
2. Extraiga el archivo.
3. Abra una ventana del Explorador de Windows y navegue hasta el directorio Extensions de Qlik Sense:
   ..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
4. Copie la carpeta anygantt-4x-sunburst al directorio Extensions.
5. Reinicie Qlik Sense Desktop.

Qlik Sense Server

Para instalar la Extension AnyChart Sunburst en un servidor de Qlik Sense,

1. Descargue la Extension AnyChart Sunburst para Qlik Sense.
2. Abra la Qlik Management Console (QMC): https://<QPS server name>/qmc
3. Seleccione Extensions en la página de inicio de la QMC o desde el menú desplegable Start.
4. Haga clic en Import en la barra de acciones.
5. En el cuadro de diálogo, seleccione el archivo descargado. Deje el área de la contraseña en blanco.
6. Haga clic en Open en la ventana del explorador de archivos.
7. Haga clic en Import.

Qlik Sense Cloud

Para instalar la Extension AnyChart Sunburst en Qlik Sense Cloud, haga lo siguiente:

1. Descargue la Extension AnyChart Sunburst para Qlik Sense Cloud.
2. Acceda a la Management Console:
   • añada /console a la dirección de su tenant: https://<your tenant address>/console
   • o utilice el enlace de navegación Administration bajo el perfil de usuario en el hub

1. Vaya a la página Extensions y haga clic en Add.
2. En el cuadro de diálogo, seleccione el archivo descargado.
3. Haga clic en Add.
4. En la Management Console, vaya a la sección Content Security Policy y haga clic en Add.
5. En el cuadro de diálogo, asigne un nombre a la Content Security Policy – por ejemplo, AnyChart.
6. Escriba la dirección del servidor de origen: qlik.anychart.com
7. Seleccione las siguientes directivas:
   • connect-src
   • font-src
   • img-src
   • script-src
   • style-src

1. Haga clic en Add.

Descripción general

El Sunburst chart, también conocido como radial treemap o multilevel pie chart, es una visualización que muestra datos organizados jerárquicamente como un conjunto de anillos anidados divididos en sectores. El tamaño de los sectores representa sus valores.

Lea Inicio rápido y Dimensions and Measures para aprender cómo añadir un Sunburst chart y qué dimensiones y medidas utilizar.

Puede configurar la apariencia del gráfico: establecer los Colors y el Inner radius, añadir Center content y ajustar las Labels y Tooltips.

Además, están disponibles las siguientes opciones: Interactivity, Calculation conditions.

Inicio rápido

Este tutorial rápido explica cómo crear un Sunburst chart básico.

En primer lugar, añada un gráfico vacío a su hoja:

1. Vaya a Custom objects > AnyChart en el panel de activos.
2. Arrastre un gráfico AnyChart Sunburst vacío a la hoja.

Luego añada dos dimensiones:

1. Vaya a Dimensions en el panel de propiedades.
2. Haga clic en Add dimension y seleccione una dimensión.
3. Haga clic en Add dimension y seleccione una dimensión.

Finalmente, añada una medida, que se utiliza para calcular el tamaño de los sectores:

1. Vaya a Measures en el panel de propiedades.
2. Haga clic en Add measure y seleccione una medida.

Tenga en cuenta que también puede crear dimensiones y medidas a partir de campos o añadirlas haciendo clic en los botones del gráfico vacío.

Dimensions and Measures

Dimensions

Para añadir una dimensión, haga lo siguiente:

1. Vaya a Dimensions en el panel de propiedades.
2. Haga clic en Add dimension y seleccione una dimensión.

El Sunburst chart requiere solo una dimensión. Sin embargo, con una sola dimensión parece un pie chart ordinario (de un nivel). Para crear un gráfico multinivel, añada dos o más dimensiones.

Tenga en cuenta que debe organizar las dimensiones en el orden correcto, desde los niveles superiores a los inferiores: simplemente arrástrelas en el panel de propiedades.

AnyChart Sunburst puede mostrar datos jerárquicos con una raíz o varias raíces:

Cada sector del gráfico tiene una etiqueta de texto, que muestra su dimensión y medida. Pero las etiquetas pueden mostrar un texto diferente si es necesario. Por ejemplo, puede usar identificadores numéricos de categorías como dimensión y al mismo tiempo mostrar nombres de categorías como etiquetas. Consulte la sección Labels para obtener más información.

Measures

Para añadir una medida, haga lo siguiente:

1. Vaya a Measures en el panel de propiedades.
2. Haga clic en Add measure y seleccione una medida.

La medida se utiliza para calcular el tamaño de los sectores. En sus visualizaciones, puede utilizar cualquier medida con cualquier agregación, así como establecer medidas como expresiones personalizadas. Por ejemplo, puede utilizar una expresión personalizada para ocultar los sectores que sean demasiado pequeños.

Appearance

Color by Expression

Los sectores del gráfico se colorean con la paleta predeterminada. Alternativamente, puede colorearlos por expresión.

Colorear por expresión establece los colores mediante una expresión definida por el usuario. Al colorear por expresión, puede definir tanto qué colores usar como con qué valores usarlos, lo que permite un mayor control sobre cómo se utilizan los colores en la visualización. Por ejemplo, puede resaltar valores de interés particular o diferenciar entre valores dentro de diferentes rangos de valores. Colorear por expresión también se puede usar para colorear una visualización por valores no incluidos en la visualización.

Para colorear sectores por expresión, haga lo siguiente:

1. Vaya a Appearance > Colors en el panel de propiedades.
2. Active el interruptor Colors.
3. Seleccione By expression en el primer menú desplegable.
4. Introduzca una expresión en el cuadro de entrada.

Ejemplos

Ejemplo: Colorear por padre

Pick(Match(RegionName, 
'South', 'West', 'Midwest', 'Northeast'), 
'#d29b9b', '#57a7b1', '#5785b2', '#bdbdbd')

En este ejemplo, 4 colores distinguen los sectores que pertenecen a 4 grupos de padres diferentes.

Ejemplo: Colorear por nivel de jerarquía

If(Dimensionality() = 1, '#d29b9b', 
If(Dimensionality() = 2, '#57a7b1',
If(Dimensionality() = 3, '#bdbdbd')))

En este ejemplo, 3 colores distinguen los sectores que pertenecen a 3 niveles de jerarquía diferentes.

Ejemplo: Colorear por medida

If(Sum(CENSUS2010POP) >= 30000000, '#d29b9b', 
If(Sum(CENSUS2010POP) >= 10000000, '#57a7b1',
'#bdbdbd'))

Aquí 3 colores indican 3 tamaños de población: >= 30M, >= 10M y < 30M, y el resto ( < 10M).

Ejemplo: Colorear por medida alternativa

If(Avg(RNATURALINC2011) <= 0, '#d29b9b',
If(Avg(RNATURALINC2011) < Avg(TOTAL{1<Country = {'U.S.'}>}RNATURALINC2011), '#bdbdbd',
If(Avg(RNATURALINC2011) >= Avg(TOTAL{1<Country = {'U.S.'}>}RNATURALINC2011), '#57a7b1')))

Aquí 3 colores indican 3 tipos de tasa de crecimiento natural: <= 0 (rojo), > 0 pero por debajo del promedio total (gris) y por encima o igual al promedio total (verde). El tamaño de los sectores representa otra medida: el tamaño de la población.

Inner Radius

Puede ajustar el inner radius del gráfico para establecer el tamaño del espacio abierto en el centro.

Por defecto, el inner radius es 0%: el centro está ocupado por los elementos padre y no queda espacio adicional:

Para establecer el inner radius, haga lo siguiente:

1. Vaya a Appearance > Presentation en el panel de propiedades.
2. Utilice la opción Inner radius.

Puede utilizar el espacio en el centro para mostrar Center content.

Center Content

Cuando el Inner radius es superior a 0, queda un espacio abierto en el centro del gráfico. Puede utilizarlo para mostrar información adicional:

• Vaya a Appearance > Presentation en el panel de propiedades.
• Introduzca una expresión en el cuadro de entrada Center content.

Tenga en cuenta que es posible establecer el center content ya sea como un valor de cadena o como una expresión de cadena arbitraria. Además, puede utilizar HTML, como en el siguiente ejemplo:

'<b>POPULATION<br><span style=color:red><i>' &
Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M</i></span></b>

Labels

Las etiquetas son objetos de texto que muestran información sobre los sectores del gráfico.

Por defecto, cada etiqueta muestra la dimensión y medida de un sector, pero puede personalizar el texto:

1. Vaya a Appearance > Label en el panel de propiedades.
2. Seleccione un formato de etiqueta en el menú desplegable Text.
3. Si selecciona el formato Expression, introduzca una expresión en el cuadro de entrada.

Están disponibles los siguientes formatos de etiqueta:

Dimension

Dimension and Measure

Measure only Outside

Measure only Inside

Tenga en cuenta que si selecciona la opción Expression, es posible establecer el texto de la etiqueta ya sea como un valor de cadena o como una expresión de cadena arbitraria. El uso de expresiones le permite resaltar valores de interés particular, mostrar valores no incluidos en una visualización o resultados de cálculos, etc.

En el siguiente ejemplo, los sectores en diferentes niveles de la jerarquía muestran etiquetas diferentes:

If(Dimensionality() = 1, Country & ' POPULATION',

If(Dimensionality() = 2,
Upper(RegionName) & ': ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M',

If(Dimensionality() = 3, StateCodes)))

Tooltips

Los tooltips son cuadros de texto que aparecen cuando el usuario pasa el cursor sobre los sectores del gráfico. Puede establecer un texto de tooltip personalizado.

Tenga en cuenta que es posible establecer el texto del tooltip ya sea como un valor de cadena o como una expresión de cadena arbitraria. El uso de expresiones le permite resaltar valores de interés particular, mostrar valores no incluidos en una visualización o resultados de cálculos, etc.

Además, puede utilizar HTML en los tooltips.

Para desactivar o activar los tooltips, vaya a Interactivity en el panel de propiedades y active el interruptor Tooltips.

Para configurar el texto del tooltip,

1. Vaya a Appearance > Tooltip en el panel de propiedades.
2. Active el interruptor Tooltip text.
3. Introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada.

Los tooltips de diferentes sectores pueden mostrar diferentes textos. Por ejemplo, el texto puede variar según el nivel de jerarquía:

If(Dimensionality() = 1,
'<b>' & Upper(RegionName) & '</b><br><i>Region</i>' &
'<hr>States: ' & Count(State) & '<br>',

If(Dimensionality() = 2,
'<b>' & Upper(DivisionName) & '</b><br><i>Division</i>' &
'<hr>States: ' & Count(State) & '<br>',

If(Dimensionality() = 3,
'<b>' & Upper(State) & '</b><br><i>State</i><hr>'))) &

'Population: ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M'

Otras características

Interactivity

Por defecto, están disponibles las siguientes funciones de interactividad: selection, snapshots y Tooltips. Además, puede establecer el modo de selección o activar el drilldown en lugar de la selección.

Para desactivar o activar estas funciones, vaya a Interactivity en el panel de propiedades y utilice las siguientes funciones:

• Selection y Dimension
• Enable drilldown
• Snapshots
• Tooltips

Cuando Selection está activado, puede establecer el modo de selección utilizando el menú desplegable Dimension. Las siguientes opciones están disponibles:

La opción Enable drilldown solo está disponible cuando Selection está desactivado. Así es como funciona: si hace clic en un elemento que tiene hijos, realiza un drill down hacia él y sus hijos, y si hace clic en el elemento padre, realiza un drill up un nivel.

Calculation Conditions

AnyChart admite condiciones de cálculo: puede establecer una condición que deba cumplirse (verdadero) para que se muestre el objeto. Si la condición no se cumple, se muestra un mensaje personalizado.

Una condición de cálculo es útil cuando un gráfico o tabla es muy grande y hace que la visualización responda con lentitud. Una condición de cálculo puede ayudar, por ejemplo, a que un objeto no se muestre hasta que el usuario haya filtrado los datos a un nivel más manejable mediante la aplicación de selecciones.

Para añadir una condición, haga lo siguiente:

1. Vaya a Add-ons > Data handling en el panel de propiedades.
2. Introduzca una expresión en el cuadro de entrada Calculation condition.
3. Introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada Displayed message.

Por ejemplo, la siguiente expresión permite mostrar el gráfico solo cuando el usuario selecciona menos de 20 estados:

If(Count(State) < 20, 1, 0)

Si hay demasiados estados, AnyChart muestra este mensaje:

'There are too many states (' & Count(State) & ').'