Quaisquer exemplos de Flot com dicas de ferramentas flutuante?

Question

Atualmente, estou trabalhando em um Flot gráfico, a API que parece muito poderoso geral, embora exemplos de uso avançado não são amplamente documentados.

A API sugere que há maneiras de definir hoverable no gráfico, não que eu sei o que exatamente isso significa que eu posso fazer com ele.

Gostaria de saber se alguém poderia contribuir alguns exemplos que eles se deparam, ou o código para que o assunto, que demonstram exemplos de qualquer um dos seguintes:

• Dinâmica TOOLTIPS desencadeada por pairar sobre eventos em elementos de gráfico Flot
• Tick tooltips (pairando sobre o xaxis mostra o detalhe)
• Qualquer tipo de pairar sobre / ligação evento dinâmico que tem sido utilizado w Flot

O efeito que eu estou procurando é semelhante ao este Open flash exemplo Gráfico

Answer 1

Tenha um olhar em este exemplo flot que demonstra dicas para pontos da trama no gráfico. (Certifique-se de selecionar o Ativar dica .)

Answer 2

Há também um plugin dica simples para ele, você pode encontrá-lo aqui

E eu também adicionar um pouco de recurso para o plugin, você pode encontrá-lo no github. https://github.com/skeleton9/flot.tooltip

Answer 3

http://data.worldbank.org é construído usando Flot e usa as dicas.

Answer 4

O link na resposta de Simon trabalhou muito bem para fornecer um gancho para usar com as dicas de ferramentas flutuantes. No entanto, descobri que eu tinha que escavar ao redor e código de corte para cima, a fim de realizar a pairar afetar. Aqui está o resultado (basicamente textualmente http://people.iola.dk/olau /flot/examples/interacting.html ).

A única definição que precisa mudar na inicialização flot está no objeto opções. Ele precisa incluir isso como uma das opções:

var options = {
 //... : {},
 grid: { hoverable: true }
};

Esta função construções e mostra o elemento dica quando chamado. Os parâmetros X e Y são deslocamentos dentro do flot assim as posições dica adequadamente. Os conteúdos são o que são mostrados na dica

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

Este é o bind, ele só deve ser chamado uma vez quando o elemento usado como um espaço reservado para flot está disponível. Ele fios manipulador de eventos. previousPoint é usado como uma bandeira para exibir a dica de ferramenta

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

Answer 5

Confira esta biblioteca para dica de ferramenta e integração flot

https://github.com/krzysu/flot.tooltip

Answer 6

http://craigsworks.com/projects/qtip2/demos/#flot é meu JS favoritos dica biblioteca. Sua mauzão bonita e tem integração flot.

Answer 7

Você pode adicionar dados personalizados para a matriz de dados e usar isso para dicas de ferramentas de exibição.

Veja a minha resposta e exemplo completo aqui: exibindo dica personalizada quando pairando sobre um ponto em flot