Como Criar um Preenchimento de Gradiente para um Gráfico

Este artigo mostrará como criar e usar um preenchimento de gradiente para um gráfico usando um modelo JSON. O exemplo mostrado usa um gráfico de área. Este artigo pressupõe que você tenha um gráfico com seus dados subjacentes já criados e que criará um modelo JSON para usar para obter um preenchimento de gradiente.

Nota

Este exemplo ilustra a alteração de Rótulos de Dados que aparecem no Gráfico para usar um tamanho e tipo de fonte especificados. Você pode remover a parte "área" da sintaxe JSON se não quiser modificar as informações do Rótulo de Dados.

Exemplo de preenchimento de gradiente aplicado a um Gráfico de Área

Etapa 1: Crie o Modelo JSON

Navegue até o App Workbench
Clique em Look and Feel na barra de ferramentas do App Workbench
Clique na aba de navegação Modelos
Clique no botão + Modelo
Atribua um Nome para o Template. Por exemplo: Gradiente
Altere o valor Tipo de conteúdo para JSON
Clique em Salvar

Insira a sintaxe apropriada no campo Editor (ou Source). Você precisará das cores especificadas start e stop que deseja usar para o gradiente à mão, e pode inserir esses valores como código de cor hexadecimal ou como rgba. Por exemplo:

{
    "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"
                    }
            }
        }    
    ]
}

Clique no botão Salvar

Etapa 2: Conecte o Modelo JSON ao Gráfico

Agora que o JSON Template foi criado, podemos adicioná-lo ao nosso Chart:

Navegue até a página Chart onde você deseja adicionar o preenchimento de gradiente
Clique em Action Drawer > Live Designer
Selecione o gráfico
Clique no botão + Control em Order Details Controls
Selecione JSON Options Object como o Control Type
Atribua um Name. Por exemplo: Gradient
Clique no menu suspenso Template e selecione o JSON Template criado na Etapa 1
Clique em Next e Finish