Como obter datas de altos gráficos no eixo x?

119

Existe uma maneira padrão de obter datas no eixo x para Highcharts? Não é possível encontrá-lo na documentação: http://www.highcharts.com/ref/#xAxis--type

Quando meu intervalo de tempo é grande o suficiente, ele mostra datas. No entanto, quando o intervalo de tempo não é grande o suficiente, ele mostra apenas horas, assim:

insira a descrição da imagem aqui

Isso não é o ideal ... se pudesse mostrar uma data e hora nesse caso, seria ótimo. Alguém sabe como?

javascript highcharts Jeff
fonte

Respostas:

259

Os Highcharts tentarão encontrar automaticamente o melhor formato para o alcance atual do zoom. Isto é feito se o eixo x tem o tipo 'datetime'. Em seguida, a unidade do zoom atual é calculada e pode ser uma das seguintes:

segundo
minuto
hora
dia
semana
mês
ano

Esta unidade é usada para encontrar um formato para os rótulos dos eixos. Os padrões padrão são:

second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'

Se você deseja que o dia faça parte dos rótulos no nível "hora", altere a dateTimeLabelFormatsopção para esse nível incluir %dou %e. Estes são os padrões disponíveis:

% a: dia da semana curto, como "seg".
% R: Dia da semana prolongado, como segunda-feira.
% d: dia do mês com dois dígitos, de 01 a 31.
% e: dia do mês, de 1 a 31.
% b: mês curto, como 'Jan'.
% B: mês longo, como 'janeiro'.
% m: número do mês com dois dígitos, de 01 a 12.
% y: dois dígitos no ano, como 09 em 2009.
% Y: ano com quatro dígitos, como 2009.
% H: horas de dois dígitos no formato 24h, de 00 a 23.
% I: horas de dois dígitos no formato 12h, de 00 a 11.
% l (letras minúsculas L): horas no formato 12h, de 1 a 11.
% M: minutos de dois dígitos, de 00 a 59.
% p: AM ou PM maiúsculas.
% P: AM ou PM minúsculas.
% S: dois dígitos segundos, 00 a 59

http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats

eolsson
fonte

Pode ser uma pergunta estúpida, mas por curiosidade ... onde você encontrou o restante desses códigos de datas? A referência mostra apenas os padrões padrão que você incluiu.

precisa saber é o seguinte

Encontrado lendo a fonte, verificar o método dateFormat aqui: Utilities.js

eolsson

Apenas para adicionar isso, o padrão padrão para o nível de zoom atual também inclui a tecla 'milissegundo'.

Cory

Muito obrigado por isso - a documentação refere-se a "dateFormat", mas não está claro se eles esperam que você consulte o método na fonte ou em algum outro lugar nos documentos. Me salvou um monte de tempo :)

Jon

Eu o configurei como no seu exemplo, mas ele ainda mostra milissegundos quando eu forneço dados com mais frequência do que uma vez por segundo. Tens alguma ideia do porquê?

Niels Brinch

Confira este exemplo na API Highcharts.

Substitua este

return Highcharts.dateFormat('%a %d %b', this.value);

Com isso

return Highcharts.dateFormat('%a %d %b %H:%M:%S', this.value);

Veja aqui sobre a dateFormat()função.

Veja também - tickInterval e pointInterval

Bhesh Gurung
fonte

É uma pergunta antiga, mas esta resposta foi muito útil. Especialmente o exemplo de link que você anexou.

22614 CyberMJ

O link de amostra não está mais funcionando. Nada acontece quando selecionamos Executar.

Simsons

@ Simsons O link Highcharts que eu usei estava morto, então atualizei o link. Agora, o violino parece estar funcionando.

Bhesh Gurung

Aqui está uma lista dos códigos de data que dateFormataceita: github.com/highcharts/highcharts/issues/...

Trevor Gehman

Você escreve assim:

xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
           day: '%d %b %Y'    //ex- 01 Jan 2016
        }
}

também verifique se há outro formato de data e hora

http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats

Ronniemittal
fonte