Saltar al contenido

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

Usos del Vinyl 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 y el funcionamiento de los gráficos. Usando una Plantilla JSON puedes definir opciones JSON para reemplazar las opciones pasadas a Highcharts al renderizar gráficos en una aplicación Vinyl para permitir una mayor personalización.

Highcharts define todas las opciones de configuración de gráficos que admiten, 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 en su aplicación que no sea el gráfico que desea modificar. Abra una utilidad desarrollador web como DevTools de Chrome o Firefox Devtools 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 tiene el gráfico que desea modificar (no recargue el navegador web). En tu consola verás el Vinyl JSON producido:

Chart Customers By Country  - using the following chart configuration:

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

Utilizando este resultado, junto con la documentación de la API de Highcharts, identifique qué desea modificar específicamente. Luego, navegue hasta IDE > Look and Feel > seleccione la Plantilla para la colección que desea modificar > y +Plantilla para crear una nueva modelo. Especifique JSON como tipo de contenido para la nueva modelo. Escriba su JSON de salida en el cuadro de texto proporcionado.

Por último, vaya a Página de gráfico > 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 característica.

Ejemplos de Opciones JSON

Para formatear un pastel con una etiqueta útil, utilice lo siguiente. Esto generará "EE.UU. 5%".

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

Para establecer un valor mínimo y máximo del eje y (bueno para valores de 0 a 100%), use:

{
             "yAxis": [{
                 "softMin": {{min}},
                 "softMax": {{max}}
             }]
}

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
  • nulo es un valor válido

Recursos

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

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