هل هناك أي أمثلة على Flot مع تلميحات الأدوات العائمة؟

Question

أعمل حالياً على أ تعويم الرسم البياني، واجهة برمجة التطبيقات والذي يبدو قويًا جدًا بشكل عام، على الرغم من عدم توثيق أمثلة الاستخدام المتقدم على نطاق واسع.

تقترح واجهة برمجة التطبيقات (API) أن هناك طرقًا لتعيين قابلية التمرير على الرسم البياني، لكنني لست متأكدًا مما يعنيه ذلك بالضبط الذي يمكنني فعله به.

أود أن أعرف ما إذا كان بإمكان أي شخص أن يساهم ببعض الأمثلة التي صادفها، أو رمزًا لهذا الأمر، والذي يوضح أمثلة على أي مما يلي:

• تلميحات الأدوات الديناميكية التي يتم تشغيلها عن طريق التمرير فوق الأحداث في عناصر مخطط Flot
• ضع علامة على تلميحات الأدوات (يؤدي التمرير فوق المحور X إلى إظهار التفاصيل)
• أي نوع من ربط الأحداث/ربط الأحداث الديناميكي الذي تم استخدامه مع Flot

التأثير الذي أبحث عنه مشابه لـ هذا افتح مثال مخطط فلاش

Answer 1

القي نظرة على هذا المثال تعويم الذي يوضح تلميحات الأدوات لنقاط الرسم على المخطط.(تأكد من تحديد تمكين تلميح الأدوات خانة الاختيار.)

Answer 2

يوجد أيضًا مكون إضافي بسيط لتلميحات الأدوات، يمكنك العثور عليه هنا

وأضيف أيضًا بعض الميزات إلى البرنامج المساعد، يمكنك العثور عليها على جيثب.https://github.com/skeleton9/flot.tooltip

Answer 3

http://data.worldbank.org تم تصميمه باستخدام Flot ويستخدم تلميحات الأدوات.

Answer 4

يعمل الرابط الموجود في إجابة سيمون بشكل جيد جدًا لتوفير رابط لاستخدامه مع تلميحات الأدوات العائمة.ومع ذلك، وجدت أنه كان عليّ البحث وتقطيع التعليمات البرمجية من أجل تحقيق تأثير التمرير.هذه هي النتيجة (حرفيًا بشكل أساسي من http://people.iola.dk/olau/flot/examples/interacting.html).

الإعداد الوحيد الذي يحتاج إلى التغيير في تهيئة المجموعة موجود في كائن الخيارات.يجب تضمين هذا كأحد الخيارات:

var options = {
 //... : {},
 grid: { hoverable: true }
};

تقوم هذه الوظيفة بإنشاء عنصر تلميح الأداة وإظهاره عند استدعائه.المعلمات x وy عبارة عن إزاحات داخل المجموعة بحيث يتم وضع تلميح الأداة بشكل صحيح.المحتويات هي ما يظهر في تلميح الأداة

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

هذا هو الرابط، ويجب استدعاؤه مرة واحدة فقط عندما يكون العنصر المستخدم كعنصر نائب لـ flot متاحًا.يقوم بتوصيل معالج الحدث.يتم استخدام PreviousPoint كعلامة لعرض تلميح الأداة

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

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

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

Answer 5

تحقق من هذه المكتبة للحصول على تلميحات الأدوات وتكامل الأسطول

https://github.com/krzysu/flot.tooltip

Answer 6

http://craigsworks.com/projects/qtip2/demos/#flot هي مكتبة تلميحات أدوات JS المفضلة لدي.إنها بدس جميلة ولديها تكامل عائم.

Answer 7

يمكنك إضافة بيانات مخصصة إلى مصفوفة البيانات واستخدامها لعرض تلميحات الأدوات.

انظر إجابتي والمثال الكامل هنا:عرض تلميح الأدوات المخصص عند المرور فوق نقطة في التدفق