Używałem flot do moich potrzeb związanych z wykresami jquery. Teraz muszę dodać wykres kołowy (który, jak wiem, flota radzi sobie całkiem nieźle). W przypadku wykresu kołowego jedną z rzeczy, których nie zauważyłem, a które posiada flota, były objaśnienia wartości na każdym fragmencie koła (objaśnienia będące etykietą z linią łączącą etykietę z fragmentem koła). Czy ktoś wie, jak zmusić objaśnienia do pracy na kawałku ciasta we floty?

Głównym powodem, dla którego potrzebujemy objaśnień, jest to, że musimy mieć etykietę dla każdego kawałka ciasta, niezależnie od jego rozmiaru. Objaśnienia pozwoliłyby nam mieć mniejsze kawałki tortu i zmniejszyć możliwość nakładania się tekstu na etykiety.

Zaproponowałem użycie legendy, ale jest to nie do przyjęcia dla biznesu. Wiem, że inne rozwiązania do tworzenia wykresów umożliwiają objaśnienia etykiet, ale jeśli to możliwe, chciałbym nadal używać flot.

Z góry dziękuję.

1
Ed Sinek 15 lipiec 2011, 20:26

2 odpowiedzi

Najlepsza odpowiedź

Dodałem coś podobnego do testu dla plotera. Będziesz musiał dostosować rozwiązanie do swojego konkretnego scenariusza, ale to powinno być dużą pomocą.

 function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body");//.fadeIn(200);
 }

 var previousPoint = null;

 $('#placeholder').bind('mouseout', function() {
    plot.unhighlight();
    $("#tooltip").remove();
    $(this).data('previous-post', -1);
 });

 $('#placeholder').bind('plothover', function(event, pos, item) {
    if (item) {
        if ($(this).data('previous-post') != item.seriesIndex) {
            plot.unhighlight();
            plot.highlight(item.series, item.datapoint);
            $(this).data('previous-post', item.seriesIndex);
        }
        $("#tooltip").remove();
        y = 'on ' + (new Date(item.datapoint[0])).toDateString() + ': ' + item.datapoint[1];
        showTooltip(pos.pageX, pos.pageY, item.series.label + " " + y);
    } else {
        plot.unhighlight();
        $("#tooltip").remove();
        previousPost = $(this).data('previous-post', -1);
    }
 });

Daj mi znać, jeśli to pomoże!

4
ghayes 21 lipiec 2011, 09:26
Nie do końca to, co miałem na myśli, ale jest o wiele lepsze niż inne alternatywy, które wymyśliłem. dzięki.
 – 
Ed Sinek
22 lipiec 2011, 08:03
Tak, to zdecydowanie pomogło. Zobaczymy, co powiedzą te moce, ale myślę, że to najlepsze rozwiązanie, jakie do tej pory widziałem. Zajęło mi chwilę zorientowanie się, że zmienna "plot" była wartością zwracaną $.plot(...). Kiedy już to dostałem, reszta to bułka z masłem.
 – 
Ed Sinek
22 lipiec 2011, 20:37

Aby wyświetlić objaśnienie, możesz użyć zdarzenia plothover. Etykieta objaśnienia może znajdować się w dowolnym miejscu. Jest to pokazane w ostatnim przykładzie na stronie Flot. Arkusze kalkulacyjne Google używają rozwiązania podobnego do tego, do którego prowadzą linki, i działa bardzo dobrze.

1
Ben Ripley 21 lipiec 2011, 08:29
Dzięki - to właśnie robię w tej chwili i niestety to niewystarczające
 – 
Ed Sinek
22 lipiec 2011, 08:02