Como Usar Modelos de Objetos de Opções JSON com Gráficos¶
App Builder usa Highcharts como o mecanismo de relatórios para Charting criado em Páginas de aplicativo. Padrões são fornecidos para a aparência e comportamento dos gráficos. Usando um Modelo JSON você pode definir opções JSON para substituir as opções passadas para Highcharts ao renderizar Gráficos em an App Builder aplicativo 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 especificamente você deseja modificar. Em seguida, navegue até IDE > Look and Feel > selecione o Template para a Coleção que deseja modificar > e +Template para criar um novo template. Especifique JSON como o Tipo de conteúdo 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: