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