Saltar al contenido

Cómo Utilizar Plantillas de Objetos de Opciones JSON con Gráficos

App Builder utiliza Highcharts como motor de informes para los gráficos creados en las páginas de la aplicación. Se proporcionan valores predeterminados para la apariencia de los gráficos. Con una Plantilla JSON puede definir opciones JSON para reemplazar las opciones que se pasan a Highcharts al representar gráficos en an App Builder aplicación para permitir una mayor personalización.

Highcharts define todas las opciones de configuración de gráficos que admite, así como los métodos y propiedades de los objetos Highchart en su documentación API.

Para crear su propia Plantilla JSON, visite una página de su aplicación distinta del gráfico que desea modificar. Abra una utilidad desarrollador web como DevTools de Chrome o DevTools de Firefox y pegue lo siguiente en la consola:

var logging = require("vinyl.logging");
logging.enabled = true;
logging.preserve = true;

A continuación, navegue hasta la página que contiene el gráfico que desea modificar (no vuelva a cargar el navegador web). En su consola verá el JSON App Builder producido:

Chart Customers By Country  - using the following chart configuration:

Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1)`[…], `series: (1)`[…], `tooltip: {…}, exporting: {…}, legend: {} }

Con esta salida, junto con la documentación de la API de Highcharts, identifica qué es lo que quieres modificar específicamente. Luego, ve a IDE > Look and Feel > selecciona la Template para la Collection que quieres modificar > y +Template para crear una nueva modelo. Especifica JSON como Content Type para la nueva modelo. Escribe el JSON de salida en el cuadro de texto provisto.

Por último, vaya a su Página de gráficos > Cajón de acciones > Diseñar esta página y agregue un nuevo Control. Elija Objeto de opciones JSON como Tipo de control y seleccione su modelo JSON. Puede proporcionar parámetros si la modelo JSON utilizó esa función.

Ejemplos de Opciones JSON

Para dar formato a un gráfico circular con una etiqueta útil, utilice lo siguiente. Esto dará como resultado "USA 5%".

{
    "series":[
       {
          "dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
       }
    ]
}

Para establecer un valor mínimo y máximo en el eje y (válido para valores de 0 a 100 %), utilice:

{
             "yAxis": [{
                 "softMin": {{min}},
                 "softMax": {{máximo}}
             }]
}

Para dar formato a las etiquetas en el gráfico de embudo para que aparezcan junto al gráfico sin que se corten:

{
             "plotOptions": [{
                        "funnel": {
                        "dataLabels":{
                            "crop": "false"
                         }
                                }]
}

Notas Importantes

  • En JSON, el nombre del parámetro debe ser una cadena: "propiedad": 1
  • null es un valor válido

Recursos

El siguiente enlace externo de Github a Chartopedia de AnyChart es una herramienta útil a la hora de intentar determinar qué propiedad modificar en un objeto JSON de Highcharts:

https://www.anychart.com/chartopedia/