Ir para o conteúdo

Como criar um preenchimento de gradiente para um gráfico no Jitterbit App Builder

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ê já tenha um gráfico com os dados subjacentes criados e que criará um modelo JSON para obter um preenchimento de gradiente.

Nota

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

gradiantarea.png

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

Etapa 1: Crie o modelo JSON

  1. Navegue até o App Workbench
  2. Clique em Aparência na barra de ferramentas do App Workbench
  3. Clique na aba de navegação Modelos
  4. Clique no botão + Modelo
  5. Atribua um Nome ao modelo. Por exemplo: Gradiente
  6. Altere o valor do Tipo de conteúdo para JSON
  7. Clique em Salvar

  8. Insira a sintaxe apropriada no campo Editor (ou Fonte). Você precisará das cores início e fim especificadas que deseja usar para o gradiente, e pode inserir esses valores como código de cor hexadecimal ou 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"
                    }
            }
        }
    ]
}

  9. Clique no botão Salvar

Etapa 2: conectar o modelo JSON ao gráfico

Agora que o modelo JSON foi criado, podemos adicioná-lo ao nosso gráfico:

  1. Navegue até a página do gráfico onde deseja adicionar o preenchimento de gradiente
  2. Clique em Gaveta de Ações > Designer ao Vivo
  3. Selecione o gráfico
  4. Clique no botão + Controle em Controles de Detalhes do Pedido
  5. Selecione Objeto de Opções JSON como Tipo de Controle
  6. Atribua um Nome. Por exemplo: Gradiente
  7. Clique no menu suspenso Modelo e selecione o modelo JSON criado na Etapa 1
  8. Clique em Avançar e Concluir