3

Como faço para mover um gráfico, usando Highcharts?

Em vez de mover com o mouse para a direita e para a esquerda, eu gostaria de usar as teclas direcionais (seta para direita, para esquerda, para cima, e para baixo).

http://goo.gl/oJ71Dx

Este exemplo usa o mouse para mover; eu preciso fazer com as teclas. Alguém poderia me ajudar?

1 Resposta 1

3

Isso não é muito difícil. O Highcharts tem um objeto muito rico que você pode manipular. Eu atualizei seu fiddle com uma solução para mover para os lados com o teclado.

A chave da solução foi primeiramente garantir que o container receba os eventos de teclado pois tags div normalmente não os recebem. Para isso adicionei o atributo tabindex="-1". Depois foi só monitorar o evento keydown e mudar os extremos do eixo X a cada tecla de seta para a direita ou para a esquerda:

$('#container')
.on('keydown', function(event){
    var deltaX, hc, extr;
    if(event.which === 37 || event.which === 39) {
        deltaX = 1000000000; //ajuste esse tamanho a seu gosto
        if (event.which === 37) deltaX = -deltaX; // p/ esquerda
        hc = $('#container').highcharts();
        extr = hc.xAxis[0].getExtremes();
        hc.xAxis[0].setExtremes(extr.min + deltaX, extr.max + deltaX);
    }
})

Também coloquei o container em foco logo ao início, com $('#container').focus();.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .