Evidenzia linea nel grafico di galleggiamento

Question

E 'possibile evidenziare un grafico a linee con flottaggio? Vedo solo l'evidenziazione dei datapoints ma non le linee tra i punti.

Uso il codice dal seguente example.

$("#placeholder").bind("plothover", function (event, pos, item) { 
    $("#x").text(pos.x.toFixed(2)); 
    $("#y").text(pos.y.toFixed(2)); 

    if ($("#enableTooltip:checked").length > 0) { 
     if (item) { 
      if (previousPoint != item.dataIndex) { 
       previousPoint = item.dataIndex; 

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

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

Answer 1

Guardando alla sorgente per flot 0.7, non è inclusa la funzionalità per evidenziare le linee.

Tuttavia, se si voleva estendere flot a fare quello che vuoi ...

Flot ha una tela "overlay" che utilizza per fare effetti come la sottolineatura. Questo ha il contesto associato octx nella fonte. Se si osserva il metodo drawPointHighlight(series, point), è possibile vedere come viene eseguita l'evidenziazione per i punti dati. Potresti scrivere un metodo simile per le linee.

La funzione drawOverlay() esegue iterazioni su una serie di oggetti illuminabili - che si desidera estendere per gestire anche oggetti "linea".

Infine, è necessario scrivere un metodo per aggiungere/rimuovere linee dall'array di oggetti illuminabili, analogamente ai metodi esistenti highlight() e unhighlight(). Avviso questi metodi sono resi pubblici utilizzando le linee:

plot.highlight = highlight; 
plot.unhighlight = unhighlight; 

Answer 2

Invece di cercare di mettere in evidenza un particolare segmento di linea (o gruppo di punti di dati all'interno di una serie), hai potuto utilizzare due serie differenti (ognuno con un colore appropriato) per fare ciò che vuoi?

Lo faccio con i grafici a barre per essere in grado di mostrare una dimensione aggiuntiva sul grafico del grafico e funziona ragionevolmente bene.

NOTA: ho utilizzato principalmente il flot per i grafici a barre, quindi se la linea della serie scende sull'asse orizzontale per un valore zero, potrebbe essere necessario utilizzare una serie separata ogni volta che si desidera che il colore cambi (o cambiare di nuovo).

Answer 3

La cosa più semplice da fare è utilizzare l'evento "plothover" per ri-renderizzare il grafico. Flot rende estremamente veloce, quindi non dovrebbe esserci alcun sfarfallio. Sto facendo questo in un progetto al momento, e funziona benissimo.

È possibile trovare la documentazione sul 'plothover' ed eventi 'plotclick' qui: https://github.com/flot/flot/blob/master/API.md#customizing-the-grid

una funzionalità non documentata di flot è che è possibile aggiungere le chiavi arbitrarie a ciascun oggetto della serie, e quelle chiavi sarà disponibile in i gestori di eventi "plothover" e "plotclick". Nel mio esempio ho creato una chiave arbitraria chiamata 'chiave', potresti usare 'etichetta', se stai usando le etichette.

Ecco un esempio:

$(function() { 

    var d1 = []; 
    for (var i = 0; i < 14; i += 0.5) { 
    d1.push([i, Math.sin(i)]); 
    } 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    var d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]]; 

var data = [ 
    {key: 'd1', data: d1}, 
    {key: 'd2', data: d2}, 
    {key: 'd3', data: d3} 
    ]; 

    function plotChart(lineKey) { 
     $.each(data, function(index, line){ 
     line.lines = { 
      lineWidth: (lineKey === line.key) ? 3 : 0.5 
     } 
     $.plot("#placeholder", data, {grid : {hoverable: true}}); 
    }); 
    } 

    var previousPoint = null; 
    $('#placeholder').on('plothover', function(e, position, item){ 
    if (item) { 
     if (previousPoint == null || previousPoint[0] !== item.seriesIndex || previousPoint[1] !== item.dataIndex) { 
     previousPoint = [item.seriesIndex, item.dataIndex]; 
     plotChart(item.series.key); 
     } 
    } else { 
     plotChart(); 
     previousPoint = null;    
    } 
    }); 

    plotChart(); 
}); 

nota - questo funziona solo quando si passa sopra un punto dati vera e propria.

codice