مسج Flot Data / Axis Labels على رأس الرسم البياني

Question

هل هناك طريقة لتتراكم الملصقات الرقمية AX-AXIS و Y-Axis على رسم بياني Flot Jquery. لذلك، أريد أن لا تكون الملصقات في الخارج، بجانب الرسم البياني، ولكن على رأس الرسم البياني نفسه.

المثال التالي يخلق DIV تراكب أعلى الرسم البياني لشرحين:http://people.iola.dk/olau/flot/examples/annotating.html.

هل هناك طريقة واضحة للاستيلاء على نص وتنسيق محور من داخل Flot وإنشاء مثل هذا التراكب من ذلك؟ أو، هل هناك طريقة أفضل أفضل لتتراكم ملصقات المحور أعلى الرسم البياني؟

Answer 1

طريقة واحدة، والتي ليست نظيفة بشكل خاص ولن تعمل بشكل جيد إذا كنت تخطط لإظهار تسميات علامة X- و Y محور في نفس الوقت، هو ضبط labelMargin الخيار في grid إلى قيمة سلبية.

var plot = $.plot(placeholder, data, {
    ...
    grid: { ..., labelMargin: -20, ... }
    ...
});

---

يمكن أن تكون الفكرة الثانية للاستيلاء على جميع divالتي لديها class="tickLabel" بعد رسم الرسم البياني. ثم "يدويا" يغير تحديد المواقع CSS الخاصة بهم.

$("div.tickLabel").each(function(i,ele) {
    ele = $(ele);
    if (ele.css("text-align") == "center") { //x-axis
        ele.css("top", ele.position().top - 20); //move them up over graph
    } else {  //y-axis
        ele.css("left", ele.position().left + 20); //move them right over graph
    }
});

بالطبع، لا يزال هذا لديه بعض المشكلات كأقل قيم تسمية القراد على المحور X و Y يتداخلان بعضها البعض والأقل / أعلى قيم تسمية التسمية على المحور x و y سيتم وضعها على حواف الرسم البياني وبعد ولكن مع بعض الضبط بشكل جيد، قد يكون هذا حلا قابل للتطبيق.

---

الفكرة الثالثة ستكون لاستخدام مباشرة tickFormatter للحصول على تسميات القراد من المحور X و Y. يعمل هذا على غرار الفكرة الثانية ولكنه من شأنه أن يضعها مباشرة حيث تريد أن تكون بدونها من خلال "الخفقان التسمية الملحوظ" قد يحدث في إعادة وضعه والتي قد تحدث مع الوظيفة في الفكرة الثانية.

var plot = $.plot(placeholder, data, {
    ...
    xaxis: {
        ...,
        tickFormatter: function formatter(val, axis) {
           //return appropriately absolute positioned element
        }
    },
    ...
});

كيف هذا tickFormatter وظيفة يمكن أن تبدو كما هي أفضل مشتق من خلال النظر إلى مسج فلوت sourcecode. خاصة وظيفة measureLabels (هذا يحصل لك على فكرة كيف يضع الفرد نفسه ملصقات القراد) وتكثيف القراد الافتراضي الذي يشبه

function (v, axis) {
    return v.toFixed(axis.tickDecimals);
};