AI m usando a biblioteca de gráficos Highstock para um projeto de finanças da mina No entanto, estou ficando atolado em questões de desempenho Minha implementação de trabalho de Highstock tem i 5 gráficos em um gráfico ii linhas múltiplas e tipos de linha em um gráfico iii rótulos aplicados a pontos Em um gráfico iv novos dados que chegam cerca de uma vez por segundo, adicionando um ponto e animando o gráfico para a esquerda No entanto, existem algumas questões críticas que estou correndo com esta configuração. Rendering é muito lento Este é um problema de desempenho devido à quantidade e Número de vezes que os gráficos estão sendo desenhados. Pode ajustar o controle de intervalo de tempo na parte inferior Uma questão de desempenho devido aos controles de congelamento. Eu posso adicionar um ponto, animando o gráfico para a esquerda No entanto, eu não posso adicionar uma bandeira com esse novo ponto de dados Não vejo uma solução simples para esses problemas Highstock É uma excelente biblioteca Mas eu estava olhando para Google Charts API para ver se ele poderia atender a esses pontos. O desempenho do Google Charts API excede Highstock dado todas as interações Abaixo. Múltiplos gráficos em uma página. Múltiplo sobreposição de gráficos em 1 view. Charts para a linha, área de alcance, Histograma, Linhas de limite ver vermelho linhas verdes abouve. Easily adicionar uma bandeira para um ponto no meu tempo series. Easily adicionar um ponto para o meu Série de tempo gráfico de linha. Adicione facilmente uma bandeira de ponto simultaneamente à minha linha de tempo linha graph. D tem alguém passou por algo semelhante Existem outras maneiras de melhorar o meu desempenho highstock Google Charts fazer um trabalho melhor here. Ps Minha invocação highcharts se parece com este Clojurescript Código. Na minha experiência, a biblioteca de gráficos do Google executa melhor do que Highcharts, no entanto, sem mais marcação fornecida ou uma cópia de seus dados de configuração seria difícil isolar problemas específicos que poderiam contribuir para o desempenho lento. Recomendação NVD3 gráfico de linha com view finder. Se é um gráfico de ações que você está atrás ou qualquer gráfico realmente, provavelmente a mais poderosa biblioteca de gráficos lá fora é d3.There é uma biblioteca de companheiro que alavanca d3 chamado nvd3 que fornece conjuntos de Reutilizáveis, você pode querer olhar para o seu gráfico de linha com view finder Ele não vai exatamente imitar o que você tem no lugar, mas na minha experiência não só é melhor desempenho, mas se você conhece um pouco de JS d3, é infinitamente mais fácil de personalizar Sob o capô e não apenas cosmeticamente mais além há muito mais pessoas lá fora, com experiência e vontade de ajudar. Respondido Apr 11 14 em 13 48.Nós usamos Node para relatar, mas não como parte do nosso principal sinal gerando trading system. To Ser honesto a resposta será quase certamente sim para cada tecnologia de programação comum, uma vez que leva apenas uma pessoa para usá-lo em algum lugar para fazer a resposta sim. Just olhar OCaml, antes Jane Street, a maioria techno logiest na rua nunca tinha ouvido falar dele E agora é muito bem conhecido. Probably a resposta canônica para este tipo de pergunta deve ser este. META RANT Em geral, eu acho esse tipo de perguntas um pouco preocupante para este site por dois reason. for qualquer linguagem de programação dada ou pilha se você uma Sk é alguém usando isso para a negociação a resposta é provavelmente mais provável yes. There é nenhum resultado real ou chamada à ação a partir da pergunta Se alguém responde sim, então o que se alguém responde não, então o que é a resposta canônica para uma pergunta como esta That. Or colocar de outra forma, o que a resposta faria o cartaz feliz here. answered 11 de junho 14 em 14 52.The post seguinte é uma parte do D3 Dicas e Truques documento que ele livre para download Para usar este post no contexto, considere Lo com os outros no blog ou apenas baixar o pdf e ou os exemplos da página de downloads. Tooltips têm uma dualidade maravilhosa Eles são, por um lado, uma coisa muito darned útil que auxilia em dar contexto e informações onde necessário e por outro lado , Se feito com um pouco de cuidado, eles podem olhar muito stylish. Technically, eles representam um ligeiro movimento do que temos vindo a jogar até agora em uma arena ligeiramente mais complexa de transições e eventos Você pode tomar esta uma das duas formas Ou Aceitar que ele apenas Funciona e implementá-lo como mostrado, ou você vai saber o que está acontecendo e sinta-se livre para ridicularizar os meus esforços como os de um amador rank. A fonte para a implementação foi tirado exemplo de Mike Bostock aqui Este foi combinado com alguns outros bits S e peças o mais complicado está trabalhando como formatar a data exibida corretamente e inserindo uma quebra de linha na dica de ferramenta que eu encontrei aqui bem feito para todos aqueles que participam nessa discussão Eu faço a suposição de que qualquer ou todos os erros que ocorrem na implementação Será o meu, enquanto que, os sucessos serão para baixo para os contribuintes originais. Assim, apenas no caso de haver algum grau de confusão, uma dica de ferramenta uma palavra ou duas é um pedaço de informação discreta que vai aparecer na visão quando o mouse está pairado Sobre em algum lugar específico A maioria de nós viu e usou-os, mas eu suponho que nós todos tendem a chamá-los coisas diferentes tais como o infotip, a sugestão ou a caixa do hover Eu don t sabem se lá sa nome direito para eles, mas é aqui um exemplo de que nós Re tentando conseguir. Você pode ver o mouse tem pairou sobre um dos círculos de parcela de dispersão e uma dica apareceu que fornece ao usuário com a data exata e valor para esse ponto. Agora, você também pode notar que há um certo grau de Fantasia aqui como a informação é vinculada por uma forma retangular com cantos arredondados e uma ligeira opacidade A outra peça de fantasia que você não vê em um pdf é que quando essas dicas de ferramentas aparecem e desaparecem, eles fazem isso em um elegante fade-in , Fade-out maneira Purty. Now, antes de começar a descrever como o código vai junto, vamos dar uma rápida olhada nas duas técnicas específicas que eu mencionei anteriormente, transições e events. From a página principal transições são descritos como gradualmente Interpolando estilos e atributos ao longo do tempo Então o que eu entendo que significa é que se você quiser mudar um objeto, você pode fazê-lo simplesmente especificando o ponto final do estilo de atributo com o qual você quer acabar e o tempo que você quer que ele Pegue e vá. Claro, eu Ts não é tão simples, mas felizmente, as pessoas mais inteligentes do que eu tenho feito algum trabalho fantástico descrevendo diferentes aspectos das transições, por favor, consulte o seguinte para uma descrição mais completa do tópico. Hopefully observando as transições mouseover e mouseout no exemplo de dicas irá whet Seu apetite por mais. A outra técnica está relacionada a eventos de mouse Isso descreve o navegador assistindo para quando algo acontece com o mouse na tela e quando ele faz, leva uma ação especificada Uma lista provavelmente não abrangente dos tipos de eventos são The following. mousedown Disparado por um elemento quando um botão do mouse é pressionado para baixo sobre it. mouseup Disparado por um elemento quando um botão do mouse é liberado sobre it. mouseover Disparado por um elemento quando o mouse chega it. mouseout Disparado por um elemento quando O mouse sai dele. mousemove Acionada por um elemento em cada movimento do mouse sobre it. click Acionada por um clique do mouse mousedown e, em seguida, mouseup sobre um element. c Ontextmenu Acionado por um clique do botão direito do mouse sobre um elemento. dblclick Acionado por dois cliques dentro de um curto espaço de tempo sobre um elemento. Como muitos destes são válidos para uso dentro d3 eu não tenho certeza, mas eu estou disposto a apostar que há Provavelmente mais do que aqueles aqui também Por favor, vá para uma descrição muito melhor do tópico, se necessário. Obter gorjeta. Assim, apoiado com um par de novos conceitos a considerar, vamos ver como eles são promulgados na prática. Se começarmos com Nosso gráfico de parcela de dispersão simples há 4 áreas nele que vamos querer modificá-lo pode ser mais fácil de verificar o arquivo nos arquivos de exemplo na seção de downloads on. The primeira área é o CSS O código a seguir deve ser adicionado apenas antes A etiqueta de estilo. Estes estilos estão definindo como nossa dica de ferramenta aparecerá A maioria deles são bastante diretos A posição da dica de ferramenta é feita em medidas absolutas, não relativa O texto é alinhado no centro, a altura, largura e cor do retângulo é 28px , 60px e lightsteelblue res Pectively O padding é uma característica interessante que fornece uma maneira limpa de crescer uma forma por uma quantidade fixa de um tamanho especificado. Nós ajustamos o boarder a 0px de modo que não apareça acima e um atributo puro do estilo chamado border-radius fornece o agradável Os cantos arredondados no retângulo. Por último, mas não menos importante, a linha ponteiro-eventos nenhuma está no lugar para instruir o evento do mouse a percorrer o elemento e alvejar o que estiver embaixo desse elemento. Tooltip obscurece parcialmente o círculo, o código stll agirá como se o mouse está sobre apenas o círculo. A segunda adição é um simples one-liner que deve para formas sake ser colocado sob a declaração de variável parseData. Esta linha formata a data quando ele Aparece no nosso tooltip Sem ele, o tempo seria padrão para uma combinação perturbadoramente longa de detalhes temporais No caso aqui temos declarado que queremos ver o dia do mês ee o nome do mês inteiro B. O terceiro bloco de código i S a declaração de função para div. Podemos colocar isso logo após a definição de valor no JavaScript Mais uma vez lá não é muito aqui que é surpreendente Nós dizemos que para anexar div ao elemento de corpo, nós definimos a classe para a classe tooltip a partir da CSS e definimos a opacidade para zero Pode parecer estranho ter a opacidade definida como zero, mas lembre-se, que é o estado natural de uma dica de ferramenta. Viverá invisível até que o momento da revelação chegue e ele apareça. O bloco final De código é ligeiramente mais complexo e poderia ser descrito como uma versão mutante do pequeno pouco de código que costumávamos fazer o desenho dos pontos para o diagrama de dispersão Isso é porque as dicas de ferramentas são tudo sobre os círculos de parcela de dispersão Sem um círculo Para mouseover, o tooltip nunca appears. So aqui s o código que inclui o desenho de diagrama de dispersão que é incluído desde que é bastante integral. Before nós começamos a atravessar o código, o arquivo de exemplo para tooltips que está em inclui uma breve série de comentários Para as linhas que são adicionadas ou alteradas a partir do gráfico de dispersão, por isso, se você quiser comparar o que está acontecendo no contexto, que é uma opção. As seis primeiras linhas do código são uma repetição do diagrama de desenho scatter traçado As únicas alterações São que nós aumentamos o raio do círculo de 3 5 para 5 apenas para tornar mais fácil passar o mouse sobre o objeto e removemos o ponto-e-vírgula da linha de atributos cy já que o código agora tem de continuar. Então, as adições são quebradas Em áreas que correspondem aos dois eventos mouseover e mouseout Quando o mouse se move sobre qualquer um dos círculos no gráfico de dispersão, o mouseover código é executado no elemento div Quando o mouse é movido fora do círculo um conjunto diferente de instruções são executadas . Seria um erro pensar em dicas de ferramentas no plural, porque não há toda uma série de dicas de ferramentas individuais apenas esperando para aparecer para seu círculo específico Há apenas uma dica de ferramenta que aparecerá quando o mouse se move sobre um círculo E dependendo de w O círculo do chapéu é sobre, as propriedades da dica de ferramenta alterará ligeiramente em termos de sua posição e de conteúdo. A linha do mouseover inicia a introdução da dica de ferramenta Então nós declaramos o elemento que nós estaremos introduzindo div e que nós estaremos aplicando uma transição Para ele s introdução transição As próximas duas linhas descrevem a transição Ele terá 200 milissegundos duração 200 e resultará em alterar os elementos opacidade para 9 estilo opacidade 9 Dado que o estado natural do nosso tooltip é uma opacidade de 0, isso faz sentido para Algo que aparece, mas não vai todo o caminho para um objeto sólido e mantém uma ligeira transparência apenas para torná-lo menos permanente. As seguintes três linhas formam o nosso tooltip O primeiro adiciona um elemento html que contém as nossas informações xey A data eo valor Agora isso é feito de uma maneira um pouco estranho Outros tooltips que eu vi ter usado um elemento em vez de um, mas eu usei neste caso, porque eu queria incluir o Linha break tag br para separar a data eo valor Eu tenho certeza que existem outras maneiras de fazê-lo, mas isso funcionou para mim A outra parte interessante desta linha é que isso é onde chamamos a nossa função de formatação de tempo que descrevemos anteriormente O próximo Duas linhas posicionam a dica de ferramenta na tela e para fazer isso eles pegar as coordenadas xey do mouse quando o evento ocorre com os snippets e aplicar uma correção no caso da coordenada y para elevar a dica de ferramenta para cima pelo mesmo Quantidade como sua altura 28 pixels. The na seção mouseout é ligeiramente mais simples em que ele doesn t tem que fazer qualquer texto fantasia html coordenar coisas Tudo o que tem a fazer é desaparecer o elemento div E isso é feito simplesmente por inverter a opacidade de volta Para 0 e definir a duração para a transição para 500 milissegundos sendo ligeiramente mais longo do que o fade-in faz com que pareça um pouco mais frio IMHO. Right, lá está você Como uma descrição que s acabou sendo um pouco de uma parede de texto que eu tenho medo Mas espero que entre o e Xplanation eo código de exemplo você terá a idéia Por favor, tome o tempo para violino com as configurações descritas aqui para encontrar os que trabalham para você e no processo você vai reforçar alguns dos princípios que ajudam D3 fazê-lo coisa s. Colocou uma cópia do arquivo para desenhar as dicas na seção de downloads com os exemplos gerais como. Edit 2014-05-02 Depois de uma pergunta interessante abaixo eu adicionei um novo post sobre como incluir um link HTML em dicas de ferramentas e pode ser Encontrado aqui. A descrição acima e montes de outras coisas está no D3 Dicas e Truques documento que pode ser acessado a partir da página de downloads of. Followed seus exemplos do início ao fim e encontrou-os realmente útil Como um novato completo em D3 eu vim Um longo caminho ao longo dos últimos dois dias e começou a trabalhar com os meus próprios dados Eu ve atualmente duas linhas sobre o gráfico exibindo corretamente e estou olhando agora a criação de uma transição que permitirá que cada linha a ser trazido em clicando em um botão Todos os exemplos do Como isso iria trabalhar. apreciar o seu esforço em obter tudo isso on line. Great coisas Justin Excelente para ouvir que a informação é útil Eu não tenho um exemplo para o código básico que você poderia seguir, mas se é qualquer consolo, é Na minha longa e longa lista de coisas para adicionar às dicas e truques manual Mike Dewar tem um bom exemplo em seu livro Começando com D3 que usa várias linhas e você alternar uma lenda para ligá-los e desligar Mas para o meu dinheiro Gostaria de começar com um excelente post de Jerome Cukier em transições aqui um de seus exemplos parece exatamente o que você descreve e vou estar tendo um longo olhar duro para ele quando chega a hora de adicionar isso ao manual Quando você obtê-lo ordenado, Se você acha que seria uma adição útil para o manual de dicas e truques eu estaria realmente interessado em adicioná-lo em se você estiver feliz em lançar o código - Obrigado por reading. The resposta é Sim, era meu amigo Tristemente tentando colocar o código Os comentários aqui confunde o blog e ele Tenta ligar para o url em vez de exibi-lo - Mas basta adicionar um link de exemplo para a página w3schools acima para a linha que adiciona o texto para o seu hyperlink A única coisa semi-complicado que eu tinha a fazer era colocar o link com tags em Único discurso marcas em vez de dupla discurso marcas desde o URL necessário em duplo discurso marcas. O único problema real, em seguida, sendo que, a fim de alcançá-lo que você precisa para mover o mouse até que a tooltip desaparece Claro que isso pode ser resolvido por Vários meios, dependendo do que é apropriado para o tooltip. So sim Grande questão e uma resposta real. Snap eu tenho tudo animado e didn t ler o seu post corretamente Agora que eu tenho Eu vejo que estou enfrentando o mesmo problema que você é Eu acho Que há uma solução, mas envolve o bloqueio de eventos de mouse Então eu estou me perguntando se nós poderíamos estar em uma situação de ovo de galinha onde podemos fazer uma coisa, mas isso nos impede de fazer outro Hmm. Thanks para a resposta rápida eu tentei isso e Eu coloquei um atraso no mouseout t Ransition, para que eu possa realmente mover o mouse e clicar sobre a dica de ferramenta antes que ela desaparece O texto aparece formatado como um hiperlink na dica, mas clicando nele não alcança nada a página de destino não abre Estou faltando alguma coisa. Sim, eu acho que estamos perdendo alguma coisa, eu tenho a sensação de que, utilizando um evento de mouse como um gatilho, então vincular a ação do mouse para a dica, de modo que enquanto o hiperlink aparece, o mouse ainda está ligado ao objeto de origem e Ignora o link Minha experiência nesta área é infelizmente falta Eu tenho medo Isso é o meu melhor palpite Se é um sa deve ter para a sua visualização, faça uma pergunta sobre a troca de pilha Há um monte de pessoas naquele fórum com algumas habilidades raras Desculpe eu não estava Capaz de ajudar mais. Boa pergunta O segredo é embrulhar a parte do texto que você deseja vincular com um tags que pelo som dele você já fez e, em seguida, para remover o atributo pointer-events nenhum da seção de estilo caso contrário O rato Ignore a presença da ponta de ferramenta Eu gerei um exemplo sobre para sua leitura Mais uma vez, boa pergunta. Actualmente, eu também mudou a maneira que a dica de ferramenta aparece e desaparece para que ele tem mais de uma chance de permanecer na tela quando você Mova o mouse fora do ponto no graph. Hey, estou tentando criar um gráfico de dispersão simples com tooltip Meu arquivo csv é país, x, y, eu só quero o nome do país x, y para pop-up para rotular cada ponto de dados sobre Mouse sobre lá are.200 agrupados junto em torno de uma origem assim seu pouco untidy a lable Problema simples, procurando a solução simples. Hmm Em linha reta afastado meu primeiro pensamento é massagear os dados antes de desenhar o gráfico Poderia ser feito dinamicamente usando um php script Que carregou o csv, massagens e saídas como JSON ou csv novamente Não inteiramente simples no entanto, se você não estiver familiarizado com php Eu tenho a sensação de que haverá um método disponível dentro d3 s array funções ou esta página pode ajudar, mas eu sinto muito Dizer que eu não os usei seriamente Se você puder juntar um exemplo para as pessoas comentarem uma pergunta subseqüente sobre o estouro de pilha pode obter uma resposta Boa pergunta. TY para as instruções Posso pedir conselho Em mouseover, meu código não mantém o URL em exibição ao mover o Cursor para o URL O URL é clicável, mas ele desaparece quando mover Eu movo o cursor Tentei diferentes durações, mas não obtendo os mesmos resultados mostrados no seu exemplo de gráfico Aqui está uma essência que também inclui um link para o caso de teste de fundo Como deve Eu atualizo o código para obter os mesmos resultados mostrados na carta. Boa pergunta e desculpe pelo atraso indesculpável na resposta No seu caso e aquele acima do url desvanece-se porque quando o mouse se move para fora do objeto ele irá imediatamente tentar a transição embora , Você pode notar que há um link adicional no post que eu adicionei em 201, que links para um novo post mostrando como conseguir algo muito semelhante ao que você está procurando Rever isso e ver como você começa.
No comments:
Post a Comment