Cómo Crear un Relleno Degradado para un Gráfico

Este artículo le mostrará cómo crear y usar un relleno degradado para un gráfico mediante una plantilla JSON. El ejemplo que se muestra utiliza un gráfico de área. Este artículo supone que tiene un gráfico con sus datos subyacentes ya creados y que va a crear una plantilla JSON para usarla para lograr un relleno degradado.

Nota

Este ejemplo ilustra cómo cambiar las etiquetas de datos que aparecen en el gráfico para utilizar un tamaño y tipo de fuente específicos. Puede eliminar la parte "área" de la sintaxis JSON si no desea modificar la información de la etiqueta de datos.

Ejemplo de relleno degradado aplicado a un gráfico de área

Paso 1: Crea la Modelo JSON

Vaya al App Workbench
Haga clic en Apariencia en la barra de herramientas de App Workbench
Haga clic en la pestaña de navegación Plantillas
Haga clic en el botón + Plantilla
Asigna un Nombre a la Plantilla. Por ejemplo: Degradado
Cambie el valor Tipo de contenido a JSON
Haga clic en Guardar

Ingrese la sintaxis adecuada en el campo Editor (o Fuente). Necesitará tener a mano los colores inicial y final especificados que desea utilizar para el degradado, y puede ingresar estos valores como código de color hexadecimal o como rgba. Por ejemplo:

{
    "plotOptions": {
        "series": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            },
            "fillColor": {
                "linearGradient": {
                  "x1": "0",
                  "x2": "0",
                  "y1": "0",
                  "y2": "1"
                },
                "stops": [
                  ["0", "rgba(40, 167, 229, 0.3)"],
                  ["1", "rgba(255, 255, 255, 0)"]
                ]
            }
        },
        "bar": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        },    
        "column": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        },
        "spline": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        },
        "line": {
            "dataLabels": {
                "style": {
                    "fontSize": "18px",
                    "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
                }
            }
        }              
    },

    "legend": {
            "itemStyle": {
                "fontSize": "18px",
                "fontFamily": "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif"
            }
    },
  "series": [
        {
            "dataLabels": {
                "style": {
                    "fontSize": "18px"
                    }
            }
        }    
    ]
}

Haga clic en el botón Guardar

Paso 2: Conecte la Modelo JSON al Gráfico

Ahora que se creó la plantilla JSON, podemos agregarla a nuestro gráfico:

Navegue hasta la página Gráfico donde desea agregar el relleno degradado
Haga clic en Action Drawer > Live Designer
Seleccione el gráfico
Haga clic en el botón + Control en Order Details Controls
Seleccione JSON Options Object como el tipo de control
Asignar un Nombre. Por ejemplo: Gradient
Haga clic en el menú desplegable Template y seleccione la plantilla JSON creada en el paso 1
Haga clic en Next y Finish