Linia podświetlenia na flotdzie

Question

Czy można podświetlić wykres liniowy z flot? Widzę tylko podświetlanie punktów danych, ale nie linie między punktami.

Używam kodu z następującej 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

Patrząc na źródło flot 0.7, nie ma funkcji podświetlania linii.

Jednakże, jeśli chce przedłużyć flot, aby robić to, co chcesz ...

Flot ma "overlay" płótna, które wykorzystuje do zrobienia efekty jak podświetlanie. Ma to powiązany kontekst octx w źródle. Jeśli spojrzysz na metodę drawPointHighlight(series, point), możesz zobaczyć, jak wyróżnia się podświetlenie dla punktów danych. Możesz napisać podobną metodę dla linii.

Funkcja 01.iteruje po tablicy podświetlanych obiektów - należy ją rozszerzyć, aby obsługiwać również obiekty "liniowe".

Na koniec należy napisać metodę dodawania/usuwania linii z tablicy podświetlanych obiektów, analogicznie do istniejących metod: highlight() i unhighlight(). Wskazówka metody te są podawane do wiadomości publicznej za pomocą linii:

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

Answer 2

Zamiast próbować wyróżnić konkretny odcinek (lub grupy punktów danych w serii), można korzystać z dwóch różnych serii (każdy z odpowiednim kolorze) robić, co chcesz?

Robię to za pomocą wykresów słupkowych, aby móc pokazać dodatkowy wymiar na wykresie wykresu i działa on całkiem dobrze.

UWAGA: W większości przypadków używam flotowania do wykresów słupkowych, więc jeśli linia serii spadnie do osi poziomej dla zerowej wartości, konieczne może być użycie oddzielnej serii za każdym razem, gdy chcesz zmienić kolor (lub zmienić z powrotem).

Answer 3

Najprostszym rozwiązaniem jest użycie zdarzenia 'plothover' w celu ponownego renderowania wykresu. Flot renderuje się bardzo szybko, więc nie powinno być żadnego migotania. Robię to obecnie w projekcie i działa świetnie.

można znaleźć dokumentację na temat „plothover” i wydarzeń „plotclick” tutaj: https://github.com/flot/flot/blob/master/API.md#customizing-the-grid

nieudokumentowana funkcja flot jest to, że można dodawać dowolne klucze do każdego obiektu serii, a te klawisze będą dostępne w programy obsługi zdarzeń 'plothover' i 'plotclick'. W moim przykładzie stworzyłem dowolny klucz o nazwie "klucz", możesz użyć "etykiety", jeśli używasz etykiet.

Oto przykład:

$(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(); 
}); 

uwaga - to działa tylko, gdy unosi się nad rzeczywistą Datapoint.