Highcharts: تم تجاوز التلميح بواسطة عنصر DOM آخر

_تصحيح_
استخدم html <div> المخصص وقم بتطبيق أنماط CSS.

عرض:

• http://jsfiddle.net/7wVDV/147/

الحل

هناك أيضًا طريقة بديلة تتيح لك الاحتفاظ بالمؤشر الصغير للتلميح الأصلي. يضع تلميح الأداة في مربع منفصل svg : http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -صندوق/.

sebastianbochan شكرًا لك ، يبدو أن هذه طريقة لطيفة ، لكنها لا تحل مشكلتي ، لأنني كما قلت لدي مخطط بياني ملفوف في div مع الفائض: التمرير.
تحقق من هذا الكمان لمعرفة المشكلة http://jsfiddle.net/7wVDV/201/

يعمل الحل البديل الآخر: http://jsfiddle.net/highcharts/7wVDV/202/

شكرًا لك ، @ TorsteinHonsi على الحل البديل ، سأحاول ذلك.
هل خيار "appendToBody" الذي تتطلع إلى تنفيذه في الإصدار المستقبلي؟

TorsteinHonsi هناك بعض المشاكل في الحل البديل.

1. يظهر شريط التمرير على الجسم إذا تم إنشاء تلميح الأداة على حافة الشاشة. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (اضبط عرض نافذة العرض التوضيحي على عرض رسمين بيانيين وحوم أولاً نقطة من اليمين)

2. في IE11 ، لا تقوم setSize (JS line 86) بإنشاء مربع عرض أصغر. على سبيل المثال ، يُظهر هذا العرض التوضيحي تلميحًا مقطوعًا في Chrome وتلميحًا عاديًا في IE11. http://jsfiddle.net/Lguddypf/

3. عند العرض في جدول وتحتاج إلى التمرير لرؤية الرسم البياني ، يكون موضع تلميح الأداة خاطئًا: http://jsfiddle.net/Lguddypf/1/ (قم بالتمرير في الموقع إلى الرسم البياني وقم بالمرور فوق نقطة لترى موضع تلميح الأداة هذا انتقل إلى اليسار.

الرجاء فتح http://jsfiddle.net/1jp9e4rw/3/show/ على iPad أو على Chrome. لا يتم عرض نقاط ارتساء التلميحات التي تظهر أسفل نقطة البيانات:

هذه مشكلة في دراسة تلميح الأدوات خارج الصندوق. مع التنفيذ القياسي ، تكون تلميحات الأدوات جيدة.

الحل البديل للمشكلة أعلاه: http://jsfiddle.net/1jp9e4rw/9/

pawelfus لقد جربنا بالفعل عملًا مشابهًا (H.wrap ()) في الكود الخاص بنا ، ولكن اتضح أن الحل البديل لا يحل المشكلة تمامًا أبدًا ، على سبيل المثال في حالتنا ، قد يكون به بعض مشكلات الأداء وإمكانية الوصول ، وحتى في متصفح Safari ، لا يتم حساب موضع تلميح الأدوات مثل متصفح Chrome. لذلك بدلاً من محاولة حل الخطأ باستخدام الغلاف من جانب المستهلك ، سيكون من الجيد جدًا أن تقوم الرسوم البيانية العالية بإصلاح هذه المشكلة في الكود الأصلي.

أرى أن هذا الخطأ قد تم تقديمه منذ أكثر من عام. هل هناك أي جدول زمني أو خطة لإصلاح هذا الخطأ؟

أود إصلاحًا أصليًا لهذا الخطأ أيضًا.
يبدو أن نسخ البرنامج النصي jQuery لا يعمل بشكل صحيح ، بل إن بعض الحالات تزيد الأمر سوءًا.

+1 للإصلاح الأصلي أيضًا بدلاً من الاعتماد على حل قائم على المكون الإضافي. نحن نعمل في هذه المشكلة في تطبيقنا أيضًا.

هذا هو الحل الذي اقترحه Paweł ، ولكن بدون jQuery (وتستخدم نفس الحسابات للحصول على أحجام النوافذ والمستندات) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

ليس حلاً جيدًا: :(

مرحبًاMiroLiska
التخمين من نمط أشرطة التمرير وخطأ شعار JSFiddle - إنه IE11.
في هذا المتصفح ، يبدو العرض التوضيحي لـ Pawe هو نفسه - لقد قمت فقط بإزالة تبعية jQuery ، ولم يتم تحسين أي شيء في الكود / المنطق.
راجع للشغل: إنه ناتج عن التمرير

ماذا عن هذه؟ http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
تم تعطيل الرسوم المتحركة لتجنب قفزة شريط التمرير ، ولكن يمكنك التفاف الرسوم المتحركة لتلميح الأدوات للتأكد من أنها تتحرك فقط على المساحة المتاحة أو لن تؤدي إلى أي إجراء لشريط التمرير.

KacperMadej شكرا جزيلا لك على ذلك! نواجه مشكلة مماثلة في تطبيقنا حيث نحتاج إلى تلميحات الأدوات للتداخل مع عناصر DOM الأخرى. حلك الجديد أفضل بكثير. ومع ذلك ، فإن أحد الانتقادات الصغيرة هو أنه إذا كان لديك مخططات خطية مع سلاسل متعددة ، وإذا قمت بالتمرير فوق تلميح الأداة للوصول إلى سلسلة أخرى ، فهناك تأخير طفيف حيث لا يحدث شيء والتجربة ليست رائعة.

أعتقد أن المشكلة هنا هي أن الحدث mouseOver لا يتم تشغيله إذا كان يحوم فوق تلميح أداة. لكن هذا مجرد افتراض

تعليق آخر هو - نحتاج إلى تنسيق هذا ونمطه باستخدام useHTML . حسب معلوماتي ، إذا كنت تستخدم هذا المكون الإضافي ، فلا يمكنك استخدام useHTML وتطبيق تنسيق مخصص ، فهل هذا صحيح؟

مرحبًا jackyliang

كان هناك خطأ منذ وقت طويل مع mouseOver وتلميح أداة التحويم (حول Highcharts v4.0) - لا ينبغي أن تكون هذه مشكلة لأننا نستخدم شجرة kd للبحث عن أقرب النقاط. ربما هو تراجع؟ هل يمكنك إعادة إنشاء المشكلة في jsFiddle ومشاركتها؟ شكرا!

بخصوص useHTML - نعم ، هذا قيد.

أعتقد أن المطلوب حقًا هنا هو تلميح أداة مستقل ، لا يتعلق بالرسم البياني على الإطلاق. على سبيل المثال ، يمكننا استخدام <div> البسيط الذي سيتم تحديثه عند تمرير الماوس وإخفائه عند خروج الماوس ، العرض التوضيحي: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - الآن يمكننا كتابة أي شيء داخل تلميح الأداة ، الشيء الوحيد الذي يتطلب التحسين هو تحديد الموضع (يستخدم العرض التوضيحي موضع النقطة فقط فيما يتعلق بالرسم البياني ، والمفتقد هو موضع الرسم البياني في المستند).

تضمين التغريدة نحن الآن على 6.1 (تحقق فقط). يعد عدم وجود useHTML مشكلة كبيرة حتى لو سمحنا لها بتجاوز عناصر DOM الأخرى. انتهى فريقنا بنسبة 95٪ تقريبًا من ترحيل مخططاتنا القديمة d3 إلى Highcharts (والتي تعتبر تجربة ممتعة: D) ، ولكن عادةً ما تتجاوز تلميحات الأدوات الخاصة بنا عناصر dom الأخرى نظرًا لأن كل مخطط موجود في عنصره الخاص. لذلك مع Highcharts الآن ، هذا ما يبدو عليه:

كما يمكنك أن تقول ، فإنه يحتوي على تصميم مخصص باستخدام useHTML لمطابقة تلميحات الأدوات القديمة بنسبة 100٪.

هل هناك أي فرص قد يكون هناك حل أصلي بواسطة Highcharts لدعم سلوك تجاوز السعة هذا دون كتابة الكثير من التعليمات البرمجية المخصصة؟

مرحبًا @ jackyliang ،
في هذه اللحظة الحل متاح فقط كحل بديل.

pawelfus مرحبًا Pawel ، أود أيضًا أن أعرف مدى احتمالات حصولنا على حل محلي هنا؟
لقد اخترنا Highcharts لأننا لم نرغب في تنفيذ حلول لأشياء من هذا القبيل ، ويبدو أن العديد من الأشخاص يواجهون هذه المشكلة.
نظرًا لأن جميع الحلول المذكورة هنا تحتوي على بعض الجوانب السلبية ، فإن الحصول على حل أصلي نظيف لهذا ، يبدو أنه الخطوة الصحيحة بالنسبة لي.

sebastianbochan لهذا السبب نريد أن نعرف مدى فرص حصولنا على حل محلي. أعتقد أنه لمثل هذه المكتبة العظيمة من غير المقبول أن يكون لها مثل هذا الجانب السلبي الضخم.

jackyliangrobinv شكرا على الكلمات الرقيقة! :)

jackyliangrobinv - نظرًا لشعبية المشكلة ، سنحتاج إلى حل هذه المشكلة. لا يمكنني تعيين أي وقت مقدر للوصول في هذه اللحظة.

مذكرة داخلية:
يمكن أن يكون الحل هو فصل فئة Tooltip عن فئة Chart ، وتقديمها في عنصر مستقل (النص الرئيسي؟). قد تكون المشكلة هنا هي فصل فئات Tooltip و Chart / Pointer (الأمر صعب كما حاولت في العرض التوضيحي للمخزون المتقدم) + قد نكسر تصدير تلميح الأدوات إلى الصور (عبر tooltip.refresh() ). ومع ذلك ، سيكون من الجيد تنفيذ هذا للإصدار 7: يمكننا استخدام مثال بدء تلميح الأدوات لأزرار أدوات المخزون / عناصر القائمة واستخدامها كما نرغب. تضمين التغريدة

أنا أؤيد بشدة ما قاله robinv لأن هذا أيضًا أحد الأسباب الرئيسية للتحول إلى Highcharts - أردنا تجنب كتابة الكثير من التعليمات البرمجية المخصصة. تحتوي مخططات d3 القديمة على الكثير من الإضافات / التحسينات المخصصة وأصبح إجراء تغييرات بعد فترة من الفوضى والكابوس. أنا لا أقول إننا لا نريد تخصيص HC حسب رغباتنا (التخصيص! = الامتدادات) ، في الغالب نتحدث على وجه التحديد عن الامتدادات ؛ القيام بأشياء لا يدعمها HC الافتراضي حتى الآن.

تتمثل خطتنا في نقل تكامل HC الخاص بنا إلى العملاء في غضون 2-3 أسابيع ، ونعلم أن العملاء سيشتكون إذا لم تظهر تلميحات الأدوات على عناصر dom الأخرى. إذا كان الحد الأدنى الذي نحصل عليه هو الوقت المتوقع للوصول إلى وقت القيام بذلك ، فسيكون ذلك مرضيًا في الوقت الحالي ، ومنذ ذلك الحين يمكننا تحديد ما إذا كنا نحاول كتابة حل مخصص (في الوقت الحالي) أو انتظار حل أصلي بواسطة Highcharts.

sebastianbochan أردت أن أشير إلى أن الحل البديل ليس حلاً حقًا لأن جانب تحديد المواقع متزعزع قليلاً

سأكون سعيدًا جدًا لرؤية الوقت المقدر للوصول لتطبيق أصلي أو مكونًا إضافيًا يحاكي السلوك (بدون تحديد الموضع / التمرير ، ويسمح باستخدام HTML مخصص) تلميح الأدوات الحالي مع تداخل DOM

شكرا pawelfus و @ jackyliang.

باول ، كما ذكر جاكي ، فإننا نطلق Highcharts لعملائنا في الأسابيع 2-3 القادمة ، وهذا أحد العوائق الرئيسية لتطبيقنا. نظرًا لأن هذا خطأ وليس ميزة ، فهل هذا شيء يمكننا التخطيط لمعالجته في غضون 2-3 أسابيع القادمة؟

مرحبًا pawelfus ، أردت متابعة هذا لمعرفة ما إذا كان هناك المزيد من الوضوح حول هذا / متى يمكننا توقع معرفة ذلك؟ هذا أمر بالغ الأهمية لعملية التخطيط لدينا في الوقت الحالي ، لذلك نحن ننتظر المزيد من المعلومات. شكرا!

مرحبًا wynnandrewj ، سنقوم بتحديث هذا الموضوع بمجرد تحديد ETA. لدينا خطط لإصدار v6.1.1 في الأسابيع 2-3 القادمة ، لكن لا يمكنني أن أعد بإصلاح هذه المشكلة ليتم تضمينها.

مرحبًا pawelfus ، أردت فقط المتابعة معك ومع فريقك بخصوص هذه المشكلة. نحن قريبون جدًا من إطلاق Highcharts للعملاء (فكر في 2-3 أسابيع كحد أقصى للدفعة الأولى من العملاء) ، وهذا بالتأكيد مانع. أتفهم تمامًا أنه من الصعب تحديد تاريخ محدد لذلك لن أطلب ذلك. ولكن أي معلومات عما إذا كان سيتم معالجة هذا الأمر ، وربما الجدول الزمني التقريبي ، سيكون موضع تقدير.

أي شيء يمكننا فهمه داخليًا + التواصل مع العملاء سيكون رائعًا.

شكرا!

شكرًا لصبركjackyliang ، سأعمل على هذا الرمز اليوم وسأحاول الحصول على نظرة عامة حول المشكلات المتبقية.

لدينا الآن مرشح يمكنك اختباره على http://jsfiddle.net/highcharts/fqx10th9/.

أعتقد أن المشكلات المذكورة أعلاه قد تم إصلاحها ، وهي useHTML ، وامض عند تحريك المؤشر لأعلى ، وظهور أشرطة التمرير على الصفحات الضيقة.

الرجاء اختبار هذا المرشح. إذا نجحت ، فسنجعلها جزءًا من إصدار هذا الأسابيع ، Highcharts v6.1.1.

TorsteinHonsi شكرا جزيلا لك! لا استطيع الانتظار للعب مع هذا.

تضمين التغريدة
لقد اختبرت ذلك أيضًا ، وهو يعمل في جميع السيناريوهات.

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

TorsteinHonsi كمان الخاص بك لم يعد يعمل لأن https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js غير موجود. أعتقد أنه تم حذف الفرع

تضمين التغريدة

إذا نجحت ، فسنجعلها جزءًا من إصدار هذا الأسابيع ، Highcharts v6.1.1.

وكان كذلك ، لذلك فعلنا ذلك. يمكنك استخدام Highcharts v6.1.1 + لاستخدام هذه الميزة
مرجع API: https://api.highcharts.com/highstock/tooltip.outside
عرض: http://jsfiddle.net/BlackLabel/c70h1akL/1/