Anteriormente, usei o React + AntDesign para implementar um gráfico de tempo simples, mas depois eu tinha requisitos mais complexos e exigia a exibição de 2.000 tarefas ao mesmo tempo, o que envolveu problemas de desempenho. Uma demonstração que basicamente atende às seguintes necessidades, mas o mecanismo de renderização da React causou grandes problemas de desempenho. muito preso. Depois de pensar nisso, decidi usar a trilha sonora original JS+CSS+HTML para implementá -lo, porque o desempenho no JS original da trilha sonora é o melhor. Vamos falar sobre os requisitos da nova versão:
A tarefa é exibida em uma estrutura de árvore à esquerda, dobrável
O lado direito mostra o tempo que a tarefa leva para correr
Precisa usar linhas para vincular o relacionamento entre as tarefas
Você pode aumentar o zoom à direita para visualizar o status de tarefa detalhado
Ao zoom, os gráficos permanecem em uma certa proporção para as duas extremidades com o mouse como o centro.
Ao escalar o gráfico, significa que o tempo necessário para a tarefa e as coordenadas precisam mudar de acordo com a proporção de aumento da imagem.
Quando o mouse se move no gráfico de tempo, uma linha parece solicitar a hora e as informações atuais.
Dificuldades de implementação
Zoom de mouse, zoom do eixo x
O zoom do mouse gera a escala do eixo x do gráfico de tempo. A escala de gráficos de tempo fornece três idéias aqui:
Faça a interceptação de dados, intercepte os dados antes e depois de acordo com um certo algoritmo e depois renderize a página inteira
Use o Scalex do CSS3 para escalar o DOM do gráfico de tempo
A alteração real da largura do gráfico de tempo dom, o comprimento da tarefa em execução, o comprimento das linhas de conexão e o tempo esperado necessário para a tarefa em execução são todos exibidos em porcentagens.
Vantagens e desvantagens de três idéias:
Vantagens: não há necessidade de operar os atributos CSS do DOM, e é mais conveniente renderá-los entre eles. Desvantagens: para usar o DOM Redraw, consome desempenho grave e é muito lento ao renderizar com um grande número de tarefas.
Vantagens: basta alterar o CSS do DOM, carregar rapidamente e processar mais. Desvantagens: a computação é problemática.
Vantagens: Carregamento rápido e muito suave. Desvantagens: haverá certos erros ao usar cálculos percentuais e você os verá quando o zoom entre em um certo ponto. (Todo o assunto é considerado, estou usando o terceiro tipo)
// Função que calcula a porcentagem de largura // TEMPO DE FIM: TEMPO DA TAREGA // STARTTHTIME: Hora de início da tarefa // maxTime: valor máximo de todas as tarefas // mintime: valor mínimo de todas as tarefas inicia o tempo // tempo: Toda a ordem ascendente da tarefa de início e tempo de término // Task_width: duração da tarefa, comprimento da linha de conexão horizontal, valor esquerdo da linha de conexão vertical const widthfun = function (EndTime, startTime, maxTime, Mintime) {const Task_width = (((((( Número (EndTime) - Número (StartTime)) / ((maxTime || time [time.length - 1]) - (Mintime || tempo [0])) * (Body_width - Tree_box_Dom.offsetWidth)) / Dom.Offset )* 100;Zoom do mouse, mantenha o mouse como o centro, amplie os dois lados
Vamos colocar o diagrama do processo de inferência em primeiro lugar:
// Explicação da figura acima // DOM = elemento DOM do gráfico de tempo // doml1, domel2 = dom.scrollleft; // domel1 representa o dom.scrollleft anterior; // domel2 representa o dom.scrollleft atual; // escala Representa a corrente a escala da ampliação // Scale1 representa a ampliação da última vez // Tree_Dom.OffsetWidth representa a largura da árvore à esquerda // ClientX1 representa a distância do lado esquerdo da posição do mouse da última vez = e.clientX - Tree_Dom.OffSetWidth // clientx2 representa a distância da posição atual do mouse até o gráfico de tempo // escalando com o mouse como o centro, a fórmula é: Doml2 = Domel1 (Scale/Scale1) + ClientX1 (Escala/Scale/ escala1) - e.clientx + árvore_dom.offsetwidth // fórmula explicação: // 1 escala/escala1 representa a taxa de escala desse tempo, exceto para a taxa de escala do anterior, indicando a taxa de escala atual // a largura do O volume esquerdo também será escalado durante a segunda escala; portanto, a largura à esquerda precisa ser multiplicada pela escala de escala // a largura no lado esquerdo da distância da posição do mouse da tabela de tempo também será escalonada ao zoom, para que você Também deve se multiplicar pela escala de escala // a distância real no lado esquerdo da distância da posição do mouse do gráfico de tempo no final é igual à escala do comprimento do código de rolagem esquerda // Código da página time_box_parent.scrollleft = (time_box_parent. scrollLeft + e.clientx - árvore_box_dom.offsetWidth) * (escala_x / scale_x1) - e.clien tx + tree_box_dom.offsetWidth;
Use conexões para representar relacionamentos entre tarefas
plano:
Quando usado, CSS3 + JS + HTML5 é desenhado com pseudo-elementos.
Enrole fotos de ângulo reto com DOM e defina sua posição e altura.
Desenhe com rótulos
Prós e contras:
Vantagens: nenhuma tags extra é adicionada, o que é benéfico para a renderização. Desvantagens: a tarefa pai gera várias tarefas infantis e é difícil adicionar pseudo-classes e definir a altura e a largura das pseudo-classes.
Vantagens: conveniente, basta calcular a altura da tarefa da criança a partir da tarefa pai. Desvantagens: quando houver muitas tarefas, haverá muitas fotos, que afetarão muito o desempenho.
Vantagens: a altura e a posição de cada elemento são controladas individualmente, com alta controlabilidade e cor de feedback pode ser adicionada. Desvantagens: Adicionado mais elementos, que têm um impacto na renderização (estou usando o terceiro tipo, que é um método estúpido. Um grande cara com um método melhor pode fornecer sugestões, obrigado)
Ideias de implementação:
Use uma variável para registrar a profundidade da hierarquia de cada tarefa. Use as variáveis acumuladas para obter a altura da linha vertical e o valor superior da linha horizontal em uma determinada proporção. (Use a função percentual de largura acima)
Unidade de tempo: dia, hora, minuto, segundo
Isso é relativamente simples, ideia de implementação:
Como a escala do tempo 4 desta demonstração é uma escala, determine se a diferença entre o carimbo de hora mínimo e o carimbo de hora máximo é dividido por 4, se ainda existe um dia (60 * 60 * 24, convertido em segundos), descendente Encomende de grande a pequena unidade de tempo.