Personaliza visualizaciones con el Editor de configuración de gráficos

Puedes usar el Editor de configuración de gráficos para personalizar las opciones de formato en las visualizaciones de Looker que usan la API de HighCharts. Esto incluye la mayoría de los gráficos cartesianos, como el gráfico de columnas, el gráfico de barras y el gráfico de líneas, entre otros.

Requisitos previos

Para acceder al Editor de configuración de gráficos, debes tener el permiso can_override_vis_config.

Cómo personalizar una visualización

Para personalizar una visualización con el Editor de configuración de gráficos, sigue estos pasos:

1. Visualiza una visualización en una exploración o edita una en una vista o un panel.
2. Abre el menú Editar en la visualización.

3. Haz clic en el botón Editar configuración del gráfico en la pestaña Plot. Looker muestra el diálogo Editar configuración del gráfico.

   • El panel Configuración del gráfico (fuente) contiene el JSON original de tu visualización y no se puede editar.

   • El panel Chart Config (Override) contiene el JSON que debe anular el JSON de origen. Cuando abras el diálogo Edit Chart Config por primera vez, Looker propaga el panel con algunos JSON predeterminados. Puedes comenzar con este JSON o borrar este JSON y, luego, ingresar cualquier JSON de HighCharts válido.

4. Selecciona la sección Chart Config (Override) y, luego, ingresa un JSON de HighCharts válido. Los valores nuevos anularán cualquier valor de la sección Configuración del gráfico (fuente).

   • Consulta la sección Ejemplos de este artículo para ver ejemplos de archivos JSON de HighCharts válidos.
   • Looker acepta todos los valores JSON válidos. Looker no acepta funciones, fechas ni valores indefinidos.

5. Haz clic en <> (Aplicar formato al código) para permitir que Looker aplique el formato correcto a tu JSON.

6. Haz clic en Vista previa para probar los cambios.

7. Haz clic en Aplicar para aplicar los cambios. La visualización se mostrará con los valores JSON personalizados.

Una vez que hayas personalizado tu visualización, puedes guardarla. Si viste la visualización en una exploración, guárdala. Si editaste una vista o un panel, haz clic en Guardar.

Precaución: No edites las opciones de visualización predeterminadas después de realizar cambios en el editor de configuración de gráficos. Editar las opciones de visualización predeterminadas puede causar comportamientos inesperados, incluidas visualizaciones en blanco.

Si deseas editar las opciones de visualización predeterminadas, primero quita los cambios que realizaste en el Editor de configuración de gráficos y, luego, reemplázalos. En particular, sigue estos pasos:

1. Haz clic en el botón Editar configuración del gráfico en la pestaña Plot. Looker muestra el diálogo Editar configuración del gráfico.
2. Copia el texto en el panel Configuración del gráfico (anular).
3. Haz clic en el botón Clear Chart Overrides para borrar todos los cambios.
4. Haz clic en Aplicar.
5. Edita la visualización con las opciones de visualización predeterminadas.
6. Haz clic en el botón Editar configuración del gráfico en la pestaña Plot. Looker muestra el diálogo Editar configuración del gráfico.
7. Ingresa un archivo JSON de HighCharts válido en el panel Chart Config (Override). Puedes utilizar el texto que copiaste en el paso 2 como plantilla, pero asegúrate de probar los cambios con el botón Vista previa para garantizar que no haya conflictos.
8. Haz clic en Aplicar.

Formato condicional con series formatters

El editor de configuración de gráficos acepta los archivos JSON de HighCharts más válidos. También acepta el atributo series formatters, que solo existe en Looker. Cada serie puede tener varios formateadores para combinar diferentes reglas de estilo.

El atributo series formatters acepta dos atributos: select y style.

• Ingresa una expresión lógica en el atributo select para indicar a qué valores de datos se les dará formato.
• Ingresa algún JSON en el atributo style para indicar cómo dar formato a los valores de datos.

Por ejemplo, con el siguiente JSON, cada valor de datos se volverá naranja si es mayor o igual que 380:

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

En las siguientes secciones, se describen los valores potenciales de los atributos select y style con más detalle.

El atributo select

Puedes usar los siguientes valores en una expresión select:

• value: Esta variable muestra el valor de la serie. Por ejemplo, podrías usar select: value > 0 para segmentar todos los valores positivos, o value = 100, si deseas que solo coincidan las series con un valor de 100.
• max: Usa select: max para segmentar el valor de la serie que tiene el valor máximo.
• min: Usa select: min para segmentar el valor de la serie que tiene el valor mínimo.
• percent_rank: Esta variable segmenta el valor de la serie con un percentil especificado. Por ejemplo, puedes usar select: percent_rank >= 0.9 para orientar los valores de la serie en el percentil noventa.
• name: Esta variable muestra el valor de la dimensión de la serie. Por ejemplo, si tienes un informe que muestra pedidos vendidos, cancelados y devueltos, puedes utilizar select: name = Sold para segmentar la serie en la que se vende el valor de la dimensión.
• AND/OR Usa AND y OR para combinar varias expresiones lógicas.

Para ver estas expresiones implementadas en el Editor de configuración del gráfico, consulta el ejemplo Cómo colorear los valores máximos, mínimos y percentiles.

El atributo style

Se puede usar el atributo style para aplicar estilos compatibles con HighCharts. Por ejemplo, puedes usar style.color para valores de series de colores, bordes de series de colores con style.borderColor y establecer el ancho de los bordes de la serie con style.borderWidth. Para obtener una lista más completa de opciones de estilo, consulta Opciones de Highcharts para series.column.data.

Para las visualizaciones de línea, usa style.marker.fillColor y style.marker.lineColor en lugar de style.color. Para obtener una lista más completa de opciones de estilo de línea, consulta Opciones de Highcharts para series.line.data.marker.

Para ver el formato de color implementado en el Editor de configuración del gráfico, consulta el ejemplo Cómo colorear los valores máximos, mínimos y percentiles.

Ejemplos

En las siguientes secciones, se proporcionan ejemplos de algunos casos de uso comunes para el Editor de configuración de gráficos. Para obtener una lista completa de los atributos que se pueden editar, consulta la documentación de la API de HighCharts.

• Cómo cambiar el color de fondo y el color del texto del eje
• Personaliza el color de la información sobre la herramienta
• Agrega anotaciones y subtítulos en los gráficos
• Agrega bandas de referencia verticales
• Cómo definir los valores máximos, mínimos y percentiles

Cambiar el color del fondo y el color del texto del eje

Para cambiar el color de fondo de una visualización, usa el atributo chart.backgroundColor.

De manera similar, para cambiar el color del texto de los ejes en una visualización, usa los siguientes atributos:

• xAxis.labels.style.color
• xAxis.title.style.color
• yAxis.labels.style.color
• yAxis.title.style.color

El siguiente JSON de HighCharts cambia el color de fondo de la visualización a púrpura y el texto de los títulos y las etiquetas de los ejes a blanco.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

Personalizar color de la información sobre la herramienta

Para personalizar el color de la información sobre la herramienta, usa los siguientes atributos:

• tooltip.backgroundColor
• tooltip.style.color

El siguiente JSON de HighCharts cambia el color de fondo a turquesa y el color del texto del cuadro de información a negro.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

Personaliza el contenido y los estilos de la información sobre la herramienta

Para personalizar el contenido de la información sobre la herramienta, usa los siguientes atributos:

• tooltip.format
• tooltip.shared

El siguiente JSON de HighCharts cambia el formato del cuadro de información para que el valor del eje X aparezca en la parte superior de la información en una fuente más grande, seguido de una lista de todos los valores de la serie en ese punto.

En este ejemplo, se usan las siguientes funciones y variables de HighCharts:

• {key} es una variable que muestra el valor del eje X del punto seleccionado. (en este ejemplo, el mes y el año).
• {#each points}{/each} es una función que repite el código delimitado para cada serie del gráfico.
• {series.name} es una variable que muestra el nombre de la serie.
• {y:.2f} es una variable que muestra el valor del eje Y del punto seleccionado, redondeado a dos decimales.
  • {y} es una variable que muestra el valor del eje Y del punto seleccionado.
  • {variable:.2f} redondea variable a dos decimales. Consulta la documentación sobre plantillas Highcharts para obtener más ejemplos del formato de valores.

{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

Agrega anotaciones y leyendas a los gráficos

Para agregar una anotación, usa el atributo annotations. Para agregar una leyenda al gráfico, usa el atributo caption.

Para obtener las coordenadas de un punto, haz clic en Inspect Point Metadata en la parte superior del diálogo Edit Chart Config. Luego, coloca el cursor sobre el dato que deseas anotar. Looker muestra un ID de punto, que puedes usar en el atributo annotations.labels.point.

El siguiente JSON de HighCharts agrega dos anotaciones al gráfico para explicar una disminución en los elementos del inventario después de determinados períodos. También agrega una leyenda a la parte inferior del gráfico para explicar las anotaciones en más detalle.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

Agregar bandas de referencia verticales

Para agregar una banda de referencia vertical, usa el atributo xAxis.plotBands.

El siguiente JSON de HighCharts agrega una banda de referencia vertical entre el 24 y el 29 de noviembre de 2022 para indicar un período de venta. También agrega una leyenda a la parte inferior de la tabla para explicar el significado de la banda.

Ten en cuenta que los atributos to y from de xAxis.plotBands deben corresponder a los valores de datos del gráfico. En este ejemplo, como los datos se basan en el tiempo, los atributos aceptan valores de marca de tiempo de Unix (1669680000000 para el 29 de noviembre de 2022 y 1669248000000 para el 24 de noviembre de 2022). Los formatos de fecha basados en cadenas, como MM/DD/AAAA y DD-MM-AA, no se admiten en los atributos HighCharts to ni from.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

Colorea los valores máximos, mínimos y percentiles

Consulta la página Guía de soluciones para aprovechar al máximo las visualizaciones de Looker: Personalización del formato condicional en gráficos cartesianos para obtener un ejemplo detallado sobre cómo colorear los valores máximos, mínimos y percentiles de una visualización cartesiana.