FLOT: Como fazer diferentes pontos coloridos nas mesmas séries de dados, conectadas por uma linha?

Question

Acho que posso ter tropeçado em uma limitação de flot, mas não tenho certeza. Estou tentando representar uma única série de dados ao longo do tempo. O "estado" dos itens é representado no eixo y (existem 5 deles) e o tempo está no eixo x (os itens podem alterar os estados ao longo do tempo). Eu quero que o gráfico tenha pontos e linhas conectando esses pontos para cada série de dados.

Além de rastrear o estado de um item ao longo do tempo, eu também gostaria de representar seu "status" em qualquer um dos pontos específicos. Isso eu gostaria de fazer mudando a cor dos pontos. O que isso significa é que um único item pode ter status diferentes em momentos diferentes, o que significa uma única série de dados, preciso de uma linha que conecte pontos diferentes (pontos) de cores diferentes.

A única coisa que vi até agora é a capacidade de especificar a cor para tudo pontos em um determinado conjunto de dados. Alguém sabe se há uma maneira de especificar cores individualmente?

Obrigado.

Answer 1

Com 3 visualizações, pode não valer a pena responder minha própria pergunta, mas aqui está a solução:

Meu problema original era como plotar uma conjunto de dados de pontos e uma linha, mas com cada ponto sendo uma cor que eu especifique.

O flot apenas permite especificar cores dos pontos no nível de dados, o que significa que cada cor devo Seja suas próprias conjuntos de dados. Com isso em mente, a solução é fazer uma única conjunto de dados para cada cor e desenhar esse conjunto de dados com apenas pontos e sem linhas. Então eu devo fazer um separado DataSeries que são todos os pontos que eu quero conectados pela linha e desenham esse sem pontos e apenas uma linha.

Então, se eu quiser mostrar uma linha passando por 5 pontos com cinco cores diferentes, preciso de 6 conjuntos de dados: 5 para cada ponto e 1 para a linha que as conecta. O flot simplesmente atrai tudo um no outro, e acredito que há uma maneira de especificar o que é mostrado na parte superior (para garantir que os pontos sejam mostrados acima da linha).

Answer 2

Lá vai você cara. Você precisa usar um gancho de empate.

$(function () {

  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
  var radius = [10, 20, 30, 40];

  function raw(plot, ctx) {
    var data = plot.getData();
    var axes = plot.getAxes();
    var offset = plot.getPlotOffset();
    for (var i = 0; i < data.length; i++) {
        var series = data[i];
        for (var j = 0; j < series.data.length; j++) {
            var color = colors[j];
            var d = (series.data[j]);
            var x = offset.left + axes.xaxis.p2c(d[0]);
            var y = offset.top + axes.yaxis.p2c(d[1]);
            var r = radius[j];                
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2,true);
            ctx.closePath();            
            ctx.fillStyle = color;
            ctx.fill();
        }    
    }
  };  

    var plot = $.plot(
          $("#placeholder"),
          [{ data: d2, points: { show: true } }],
          { hooks: { draw  : [raw] } }
  );  
});

Answer 3

Na verdade, não é muito difícil adicionar um recurso ao flot que voltaria ao seu código para obter a cor de cada ponto. Levei cerca de uma hora e não sou um especialista em JavaScript em nenhuma medida.

Se você olhar para drawSeriesPoints(), tudo que você precisa fazer é passar um parâmetro de retorno de chamada para plotPoints() que será usado para definir ctx.strokeStyle. Eu adicionei uma opção chamada series.points.colorCallback, e drawSeriesPoints() ou usa isso ou uma função simples que sempre retorna a série.color.

Um ponto complicado: o índice que você deve passar para o seu retorno de chamada provavelmente não é o i dentro plotPoints(), mas sim i/ps.

Espero que isto ajude!