Como Usar Modelos de Objetos de Opções JSON com Gráficos¶
Vinyl usa Highcharts como o mecanismo de relatórios para gráficos criados nas páginas do aplicativo. Os padrões são fornecidos para a aparência do gráfico. 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 Vinyl para permitir maior personalizaçã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 modelo JSON, visite uma página em seu aplicativo diferente do gráfico que você deseja modificar. Abra um utilitário de desenvolvedor web como DevTools do Chrome ou Firefox Devtools 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 Vinyl produzido:
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 Highcharts, identifique o que especificamente você deseja modificar. 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 do novo modelo. Digite seu JSON de saída na caixa de texto fornecida.
Por fim, vá para Página do gráfico > Gaveta de ação > Projete 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ê poderá fornecer parâmetros se o modelo JSON usar 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 do eixo y (bom para valores de 0 a 100%) use:
{
"yAxis": [{
"softMin": {{min}},
"softMax": {{max}}
}]
}
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"
}
}]
}
Anotações 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 Chartopedia do AnyChart é uma ferramenta útil ao tentar determinar qual propriedade modificar em um objeto JSON do Highcharts: