Como usar modelos de objetos de opções JSON com gráficos no Jitterbit App Builder
O App Builder usa Highcharts como o mecanismo de relatórios para gráficos criados nas páginas do aplicativo. Padrões são fornecidos para a aparência dos gráficos. Usando um Modelo JSON, você pode definir opções JSON para substituir as opções passadas ao Highcharts ao renderizar gráficos em um aplicativo do App Builder, permitindo maior personalização.
Highcharts define todas as opções de configuração de gráficos que eles suportam, bem como métodos e propriedades de objetos Highchart em sua documentação da API.
Para criar seu próprio Modelo JSON, visite uma página do seu aplicativo diferente do gráfico que você deseja modificar. Abra um utilitário de desenvolvedor web, como o DevTools do Chrome ou o Devtools do Firefox, e cole o seguinte no console:
var logging = require("vinyl.logging");
logging.enabled = true;
logging.preserve = true;
Em seguida, navegue até a página que contém o gráfico que você deseja modificar (não recarregue o navegador). No seu console, você verá o JSON App Builder gerado:
Chart Customers By Country - using the following chart configuration:
Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1)`[…], `series: (1)`[…], `tooltip: {…}, exporting: {…}, legend: {} }
Usando esta saída, juntamente com a documentação da API do Highcharts, identifique o que você deseja modificar especificamente. Em seguida, navegue até IDE > Aparência > selecione o Modelo para a Coleção que deseja modificar > e +Modelo para criar um novo modelo. Especifique JSON como o Tipo de Conteúdo para o novo modelo. Digite o JSON de saída na caixa de texto fornecida.
Por fim, acesse Página de Gráfico > Gaveta de Ações > Projetar esta página e adicione um novo Controle. Escolha Objeto de Opções JSON como Tipo de Controle e selecione seu modelo JSON. Você pode fornecer parâmetros se o modelo JSON utilizou esse recurso.
Exemplos de opções JSON
Para formatar uma pizza com um rótulo útil, use o seguinte. Isso resultará em "EUA 5%".
{
"series":[
{
"dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
}
]
}
Para definir um valor mínimo e máximo para o eixo y (válido para valores de 0 a 100%), use:
{
"yAxis": [{
"softMin": {{min}},
"softMax": {{máx.}}
}]
}
Para formatar rótulos no gráfico de funil para que apareçam ao lado do gráfico sem serem cortados:
{
"plotOptions": [{
"funnel": {
"dataLabels":{
"crop": "false"
}
}]
}
Notas importantes
- Em JSON, o nome do parâmetro deve ser uma string: "propriedade": 1
- nulo é um valor válido
Recursos
O seguinte link externo do Github para a Chartopedia do AnyChart é uma ferramenta útil ao tentar determinar qual propriedade modificar em um objeto JSON do Highcharts: