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 Charting criado em Páginas do aplicativo. Padrões são fornecidos para a aparência e comportamento do charting. Usando um Modelo JSON, você pode definir opções JSON para substituir as opções passadas para Highcharts ao renderizar Charts em um App Builder para permitir maior personalização.
O Highcharts define todas as opções de configuração de gráfico que eles suportam, bem como métodos e propriedades de objetos Highchart em sua documentação da API.
Para criar seu próprio JSON Template, visite uma página em seu aplicativo diferente do Chart 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 tem o gráfico que você deseja modificar (não recarregue o navegador da web). No seu console, você verá o JSON App Builder produzido:
Chart Customers By Country - using the following chart configuration:
Object { chart: {…}, xAxis: {…}, credits: {…}, title: {…}, plotOptions: {…}, yAxis: (1)`[…], `series: (1)`[…], `tooltip: {…}, exporting: {…}, legend: {} }
Usando essa saída, juntamente com a documentação da API do Highcharts, identifique o que você deseja modificar especificamente. Em seguida, navegue até IDE > Look and Feel > selecione o Template para a Collection que deseja modificar > e +Template para criar um novo template. Especifique JSON como o Content Type para o novo template. Digite seu JSON de saída na caixa de texto fornecida.
Por fim, vá para sua Página de gráfico > Gaveta de ação > Projetar esta página e adicione um novo controle. Escolha Objeto de opções JSON como o Tipo de controle e selecione seu modelo JSON. Você pode fornecer parâmetros se o modelo JSON usou esse recurso.
Exemplos de opções JSON
Para formatar uma torta com um rótulo útil, use o seguinte. Isso produzirá "USA 5%".
{
"series":[
{
"dataLabels": { "format": "{point.name} {point.percentage:.0f}%" }
}
]
}
Para definir um valor mínimo e máximo do eixo y (bom 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: "property": 1
- null é 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: