Highcharts: A dica de ferramenta está sobrecarregada por outro elemento DOM

_Gambiarra_
Use html personalizado <div> e aplique estilos CSS.

Demonstração:

• http://jsfiddle.net/7wVDV/147/

Gambiarra

Há também uma abordagem alternativa, que permite preservar o pequeno ponteiro da dica de ferramenta original. Ele coloca a dica de ferramenta em uma caixa svg separada: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -caixa/.

@sebastianbochan obrigado, parece ser uma boa abordagem, mas não resolve meu problema, pois como eu disse tenho meu gráfico envolto em um div com overflow:scroll.
Verifique este violino para um problema http://jsfiddle.net/7wVDV/201/

A outra solução alternativa funciona: http://jsfiddle.net/highcharts/7wVDV/202/

Obrigado, @TorsteinHonsi pela solução alternativa, vou tentar.
A opção 'appendToBody' é algo que você está ansioso para implementar na versão futura?

@TorsteinHonsi Existem alguns problemas com a solução alternativa.

1. A barra de rolagem aparece no corpo se a dica de ferramenta for criada em uma borda da tela. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (defina a largura da janela de demonstração para 2 gráficos de largura e passe o mouse primeiro apontar da direita)

2. No IE11 setSize (linha JS 86) não está criando uma view box menor. Por exemplo, esta demonstração mostra uma dica de ferramenta de corte no Chrome e uma dica de ferramenta normal no IE11. http://jsfiddle.net/Lguddypf/

3. Ao exibir em uma tabela e você precisa rolar para ver um gráfico, a posição da dica de ferramenta está errada: http://jsfiddle.net/Lguddypf/1/ (role o site para o gráfico e passe o mouse sobre um ponto para ver que a posição da dica de ferramenta é movido para a esquerda.

Abra http://jsfiddle.net/1jp9e4rw/3/show/ no iPad ou no Chrome . As âncoras para dicas de ferramentas que aparecem abaixo do ponto de dados não são exibidas:

Este é um problema com o estudo fora da caixa de dica de ferramenta. Com a implementação padrão, as dicas de ferramentas são boas.

Solução alternativa para o problema acima: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus Na verdade, tentamos uma solução semelhante (H.wrap()) em nosso código, mas acontece que a solução nunca está resolvendo o problema perfeitamente, por exemplo, no nosso caso, pode ter algum problema de desempenho e acessibilidade , e mesmo no navegador Safari, a posição da dica de ferramenta não é calculada da mesma forma que no navegador Chrome. Portanto, em vez de tentar resolver o bug usando o wrap no lado do consumidor, seria muito bom que os highcharts corrigissem esse problema no código nativo.

Vejo que este bug foi arquivado mais de um ano. Existe algum cronograma ou plano para corrigir esse bug?

Eu gostaria de uma correção nativa para este bug também.
Copiar o script jQuery não parece funcionar direito, algumas instâncias tornam ainda pior.

+1 para correção nativa também em vez de depender de uma solução baseada em plug-in. Estamos executando esse problema em nosso aplicativo também.

Aqui está a solução sugerida por Paweł, mas sem jQuery (e os mesmos cálculos para obter tamanhos de janela e documento são usados) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

Não é uma solução muito boa :(

Olá @MiroLiska
Adivinhar do estilo das barras de rolagem e do erro do logotipo JSFiddle - é o IE11.
Nesse navegador a demo do Paweł parece a mesma - apenas removi a dependência do jQuery, nada foi melhorado no código/lógica.
BTW: é causado pela rolagem

Que tal este? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
Animação desativada para evitar o salto da barra de rolagem, mas você pode envolver a animação da dica de ferramenta para garantir que ela seja animada apenas no espaço disponível ou não acione nenhuma ação da barra de rolagem.

@KacperMadej muito obrigado por isso! Estamos enfrentando um problema semelhante em nosso aplicativo, onde precisamos de dicas de ferramentas para se sobrepor a outros elementos DOM. Sua nova solução é muito melhor. No entanto, uma pequena crítica é que, se você tiver gráficos de linhas com várias séries, se você passar o mouse sobre a dica de ferramenta para chegar a outra série, haverá um pequeno atraso em que nada acontece e a experiência não é ótima.

Acho que o problema aqui é que o evento mouseOver não é acionado se estiver pairando sobre uma dica de ferramenta. Mas isso é apenas uma suposição

Outro comentário também é - precisamos formatar e estilizar isso com useHTML . Do meu conhecimento, se você usar este plugin, não poderá usar useHTML e aplicar formatação personalizada, certo?

Olá @jackyliang

Houve um bug há muito tempo com mouseOver e dica de ferramenta pairando (em torno de Highcharts v4.0) - isso não deve ser um problema, pois usamos kd-tree para pesquisar pontos mais próximos. Talvez seja uma regressão? Você poderia recriar o problema no jsFiddle e compartilhá-lo? Obrigado!

Em relação useHTML - sim, isso é uma limitação.

Eu acho que o que é realmente necessário aqui é uma dica de ferramenta independente, não relacionada ao gráfico. Por exemplo, podemos usar <div> simples que será atualizado ao passar o mouse e oculto ao sair do mouse, demo: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - agora podemos escrever qualquer coisa dentro da dica de ferramenta, a única coisa que precisa melhorar é o posicionamento (demo usa apenas a posição do ponto em relação ao gráfico, faltando é a posição do gráfico no documento).

@pawelfus Olá Pawel. Estamos no 6.1 agora (apenas verificado). A falta de useHTML é um grande problema, mesmo que possamos permitir que ele transborde outros elementos DOM. Nossa equipe está cerca de 95% concluída migrando nossos antigos gráficos d3 para Highcharts (o que, lembre-se, foi uma experiência agradável :D), mas tradicionalmente nossas dicas de ferramentas transbordam outros elementos dom, pois cada gráfico reside em seu próprio elemento. Então, com Highcharts agora, é assim que se parece:

Como você pode ver, ele tem um estilo personalizado usando useHTML para combinar 100% com nossas dicas de ferramentas antigas.

Há alguma chance de haver uma solução nativa do Highcharts para oferecer suporte a esse comportamento de estouro sem escrever muito código personalizado?

Olá @jackyliang ,
Neste momento, a solução está disponível apenas como soluções alternativas.

@pawelfus Oi Pawel, também gostaria de saber quais são as chances de estarmos obtendo uma solução nativa aqui?
Escolhemos o Highcharts porque não queríamos implementar soluções alternativas para coisas assim, e parece que muitas pessoas se deparam com esse problema.
Como todas as soluções alternativas mencionadas aqui parecem ter algumas desvantagens, obter uma solução nativa limpa para isso parece o passo certo para mim.

@sebastianbochan É por isso que queremos saber quais são as chances de obtermos uma solução nativa. Eu acho que para uma biblioteca tão grande é inaceitável ter uma desvantagem tão grande.

@jackyliang @robinv Obrigado pelas palavras gentis! :)

@jackyliang @robinv - dada a popularidade do problema, precisaremos resolver esse problema. Não consigo definir nenhum ETA neste momento.

Nota interna:
A solução poderia ser separar a classe Tooltip da classe Chart e renderizar em elemento independente (corpo principal?). O problema aqui pode ser desacoplar as classes Tooltip e Chart/Pointer (é complicado como tentei na demonstração de estoque avançada) + podemos interromper a exportação de dicas de ferramentas para imagens (via tooltip.refresh() ). Ainda assim, seria bom implementar isso para a v7: poderíamos usar iniciar a instância da dica de ferramenta para botões/itens de menu de ferramentas de estoque e usá-lo como desejarmos. @Torstein Honsi

Sou muito a favor do que @robinv disse porque essa também é uma das principais razões pelas quais mudamos para Highcharts - queríamos evitar escrever muito código personalizado. Nossos antigos gráficos d3 tinham muitas extensões/aprimoramentos personalizados e se tornou uma bagunça e um pesadelo fazer alterações depois de um tempo. Não estou dizendo que não queremos personalizar o HC ao nosso gosto (personalização != extensões), principalmente falando especificamente sobre extensões; fazendo coisas que o HC padrão ainda não suporta.

Nosso plano é lançar nossa integração HC para os clientes dentro de 2 a 3 semanas, e sabemos que os clientes reclamarão se as dicas de ferramentas não aparecerem sobre outros elementos dom. Se o mínimo que obtemos é um ETA de quando isso poderia ser feito, isso me satisfaria por enquanto, desde então podemos estabelecer se tentamos escrever uma solução personalizada (por enquanto) ou aguardamos uma solução nativa por Highcharts.

@sebastianbochan Eu queria observar que a solução alternativa não é realmente uma solução, pois o aspecto de posicionamento é um pouco instável

Eu ficaria muito feliz em ver um ETA para uma implementação nativa ou um plug-in que emula o comportamento (sem a instabilidade de posicionamento/passagem e permite o uso de HTML personalizado) da dica de ferramenta atual com sobreposição do DOM

Obrigado @pawelfus e @jackyliang.

Pawel, como Jacky mencionou, estamos lançando Highcharts para nossos clientes nas próximas 2-3 semanas e este é um dos principais obstáculos à nossa implementação. Dado que este é um bug e não um recurso, isso é algo que podemos planejar para ser resolvido nas próximas 2-3 semanas?

Oi @pawelfus , eu queria acompanhar isso para ver se havia mais clareza sobre isso / quando podemos esperar saber? Isso é fundamental para o nosso processo de planejamento no momento, por isso estamos aguardando mais informações. Obrigado!

Olá @wynnandrewj , atualizaremos este tópico assim que o ETA for decidido. Temos planos de lançar a v6.1.1 nas próximas 2-3 semanas, mas não posso prometer que a correção desse problema seja incluída.

Olá @pawelfus , gostaria de acompanhar você e sua equipe sobre esse problema. Estamos muito perto do lançamento do Highcharts para os clientes (pense em 2-3 semanas no máximo para o primeiro lote de clientes), e isso é definitivamente um bloqueador. Eu entendo perfeitamente que é difícil dar uma data exata, então não vou pedir isso. Mas qualquer informação se isso será resolvido, e talvez um cronograma aproximado, seria apreciada.

Basicamente, qualquer coisa que possamos entender internamente + nos comunicar com os clientes será incrível.

Obrigado!

Obrigado pela paciência @jackyliang , estarei trabalhando neste código hoje e tentarei obter uma visão geral dos problemas restantes.

Agora temos um candidato que você pode testar em http://jsfiddle.net/highcharts/fqx10th9/.

Acredito que os problemas acima foram corrigidos, ou seja, useHTML , piscando ao mover o cursor para cima e barras de rolagem aparecendo em páginas estreitas.

Por favor, teste este candidato. Se for bem-sucedido, faremos parte do lançamento desta semana, Highcharts v6.1.1.

@TorsteinHonsi muito obrigado! Mal posso esperar para brincar com isso.

@Torstein Honsi
Eu testei também, funciona em todos os cenários.

Isso funcionou super perfeito para nós e adicioná-lo de volta levou apenas 30 minutos. Muito obrigado por implementar isso tão rápido e perfeitamente!

@TorsteinHonsi seu violino não funciona mais porque https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js não existe. acho que o branch foi deletado

@BernardoFBbraga

Se for bem-sucedido, faremos parte do lançamento desta semana, Highcharts v6.1.1.

e foi, então fizemos isso. Você pode usar Highcharts v6.1.1+ para usar o recurso
Referência da API: https://api.highcharts.com/highstock/tooltip.outside
Demonstração: http://jsfiddle.net/BlackLabel/c70h1akL/1/