Bom tarde, estou realizando gráficos utilizando o amcharts alterando os dados que alimentam o gráfico.
Modelo utilizado: stacked
Ele deve ter 3 valores em cada coluna com categorias diferentes.
Os valores são altos e mesmo testando outros modelos, ocorre o mesmo problema.
A parte de menor valor fica ‘escondida’
Se retiro o Faturamento e Média retorna as quantidades como se estivesse atras das informações anteriores.
Poderias me ajudar a resolver isto ?
Desde já Agradeço!
Olá @LindaBarichello!
Compartilhe o código do gráfico (</> code) por favor
Oi, @daniel.giacomelli , segue o comando com os valores fixados.
{
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"labelAnchor": "middle",
"precision": -1,
"title": "Faturamento",
"type": "column",
"valueField": "Faturamento"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Quantidade de Cargas",
"type": "column",
"valueField": "Quantidade de Carga"
},
{
"fillAlphas": 1,
"id": "AmGraph-4",
"maxBulletSize": 10000000,
"minBulletSize": 2,
"title": "Média",
"type": "column",
"valueField": "Media"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "TERCEIRO",
"Faturamento": 36852926.31,
"Quantidade de Carga": 4725,
"Media": "7800.83"
},
{
"category": "FROTA ASSOCIADO",
"Faturamento": 45710305.72,
"Quantidade de Carga": 2965,
"Media": "15416.6"
},
{
"category": "AGREGADO",
"Faturamento": 25446043.96,
"Quantidade de Carga": 2904,
"Media": "8762.41"
},
{
"category": "FROTA PRÓPRIA",
"Faturamento": "21330662.68",
"Quantidade de Carga": "2123",
"Media": "10047.42"
}
]
}
@LindaBarichello não há muito o que fazer neste caso.
Quando os gráficos possuem valores muito distantes um do outro, a visualização acaba sendo prejudicada.
Minha sugestão é alterar usar outras abordagens, como por exemplo, usar um eixo separado para o Faturamento:
{
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"fillColors": "#7DAC4D",
"id": "AmGraph-2",
"title": "Quantidade de Cargas",
"type": "column",
"valueField": "Quantidade de Carga"
},
{
"fillAlphas": 1,
"id": "AmGraph-4",
"maxBulletSize": 10000000,
"minBulletSize": 2,
"title": "Média",
"type": "column",
"valueField": "Media"
},
{
"bullet": "round",
"lineColor": "#C41E3A",
"id": "AmGraph-1",
"title": "graph 1",
"type": "smoothedLine",
"valueAxis": "Fat-Axis",
"valueField": "Faturamento"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"title": "Axis title"
},
{
"id": "Fat-Axis",
"position": "right",
"title": "Faturamento"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "TERCEIRO",
"Faturamento": 36852926.31,
"Quantidade de Carga": 4725,
"Media": "7800.83"
},
{
"category": "FROTA ASSOCIADO",
"Faturamento": 45710305.72,
"Quantidade de Carga": 2965,
"Media": "15416.6"
},
{
"category": "AGREGADO",
"Faturamento": 25446043.96,
"Quantidade de Carga": 2904,
"Media": "8762.41"
},
{
"category": "FROTA PRÓPRIA",
"Faturamento": "21330662.68",
"Quantidade de Carga": "2123",
"Media": "10047.42"
}
]
}
Boa tarde, @daniel.giacomelli
Neste exemplo que você citou, existiria alguma forma de trazer o valor da média de forma no gráfico, fixo como no Cargas e no Faturamento, sem ser somente com o cursor?
Possivelmente não traz, porque o valor é menor em proporção ao faturamento, mas talvez tenha alguma maneira de retornar este dado.
Bom dia @LindaBarichello.
Até onde sei, os valores não são exibidos quando não cabem no gráfico.
Mesmo se tivesse como mostrar, acho que ficara confuso.
Bom dia, certo, muito obrigada.
Boa tarde, Daniel, mais um dúvida.
Quero que os separadores de milhar seja o . e não a ,
como esta apresentando a imagem abaixo
Estou usando no comando estes itens
{
"decimalSeparator": ",",
"percentPrecision": 2,
"thousandsSeparator": ".",
"precision": 3,
}
Poderias me auxiliar neste item ?
Fico no aguardo.
Olá @LindaBarichello
Parece correto. Colocando esses valore no https://live.amcharts.com/ funcionou como o esperado.
Por favor, compartilhe op código completo do gráfico novamente.
Boa tarde,
Não, não funcionou, tentei colocando
Inicialmente logo no Inicio
"type": "serial",
"categoryField": "category"
e dentro das informações das colunas, mas não funcionou, e a quantidade ficou com casas decimais e somente desejo isso para os itens Média e faturamento.
Minha ideia seria o separador de decimal com duas casas decimais no Faturamento e Média e o de milhar nesses casos também.
No quantidade não quero casas decimais.
Repliquei o comando que você inseriu antes incluindo os campos que mencionei
{
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"fillColors": "#7DAC4D",
"id": "AmGraph-2",
"precision": 0,
"title": "Quantidade de Cargas",
"type": "column",
"valueField": "Quantidade de Carga"
},
{
"fillAlphas": 1,
"id": "AmGraph-4",
"maxBulletSize": 10000000,
"minBulletSize": 2,
"decimalSeparator": ",",
"percentPrecision": 2,
"thousandsSeparator": ".",
"precision":3,
"title": "Média",
"type": "column",
"valueField": "Media"
},
{
"bullet": "round",
"id": "AmGraph-1",
"lineColor": "#C41E3A",
"title": "graph 1",
"type": "smoothedLine",
"decimalSeparator": ",",
"percentPrecision": 2,
"thousandsSeparator": ".",
"precision":3,
"valueAxis": "Fat-Axis",
"valueField": "Faturamento"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"title": "Axis title"
},
{
"id": "Fat-Axis",
"position": "right",
"title": "Faturamento"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "TERCEIRO",
"Faturamento": 36852926.31,
"Quantidade de Carga": 4725,
"Media": "7800.83"
},
{
"category": "FROTA ASSOCIADO",
"Faturamento": 45710305.72,
"Quantidade de Carga": 2965,
"Media": "15416.6"
},
{
"category": "AGREGADO",
"Faturamento": 25446043.96,
"Quantidade de Carga": 2904,
"Media": "8762.41"
},
{
"category": "FROTA PRÓPRIA",
"Faturamento": "21330662.68",
"Quantidade de Carga": "2123",
"Media": "10047.42"
}
]
}
Pelo meu entendimento, as configurações da seção “Number formatting” são aplicadas à todo o gráfico.
Se não especificar a precisão, ele mostra as decimais só quando elas existem:
{
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"decimalSeparator": ",",
"thousandsSeparator": ".",
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"fillColors": "#7DAC4D",
"id": "AmGraph-2",
"title": "Quantidade de Cargas",
"type": "column",
"valueField": "Quantidade de Carga"
},
{
"fillAlphas": 1,
"id": "AmGraph-4",
"maxBulletSize": 10000000,
"minBulletSize": 2,
"title": "Média",
"type": "column",
"valueField": "Media"
},
{
"bullet": "round",
"id": "AmGraph-1",
"lineColor": "#C41E3A",
"title": "graph 1",
"type": "smoothedLine",
"valueAxis": "Fat-Axis",
"valueField": "Faturamento"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"title": "Axis title"
},
{
"id": "Fat-Axis",
"position": "right",
"title": "Faturamento"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "TERCEIRO",
"Faturamento": 36852926.31,
"Quantidade de Carga": 4725,
"Media": "7800.83"
},
{
"category": "FROTA ASSOCIADO",
"Faturamento": 45710305.72,
"Quantidade de Carga": 2965,
"Media": "15416.6"
},
{
"category": "AGREGADO",
"Faturamento": 25446043.96,
"Quantidade de Carga": 2904,
"Media": "8762.41"
},
{
"category": "FROTA PRÓPRIA",
"Faturamento": "21330662.68",
"Quantidade de Carga": "2123",
"Media": "10047.42"
}
]
}
Funcionou corretamente, sem casas decimais na coluna de quantidade, obrigada.
Boa tarde, um dúvida com relação as formatações, procurei algumas documentações, mas infelizmente não solucionaram o que eu preciso.
Existe alguma documentação sobre formatações, por exemplo incluir o símbolo de moeda R$, negrito, aumentar a fonte somente dos valores ?
Gostaria de melhorar a aparência do gráfico com alguns ajustes, como os citados acima, isto se ferramenta permitir essas ações.
Fico no aguardo, obrigada.
Olá @LindaBarichello
Para adicionar o símbolo da moeda, basta usar o padrão de interpolação de texto do amCharts.
Por exemplo, para adicionar “R$” no balão que aparece ao passar o mouse por cima da coluna, basta informar o código abaixo no elemento correpondente ao gráfico (graph):
"balloonText": "R$ [[value]]"
Quanto as outras customizações, talvez você consiga realizá-las estilizando os elementos do gráfico com CSS.
Esta página da documentação do amCharts aborda este assunto:
https://www.amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/