مسج Flot Data / Axis Labels على رأس الرسم البياني
سؤال
هل هناك طريقة لتتراكم الملصقات الرقمية AX-AXIS و Y-Axis على رسم بياني Flot Jquery. لذلك، أريد أن لا تكون الملصقات في الخارج، بجانب الرسم البياني، ولكن على رأس الرسم البياني نفسه.
المثال التالي يخلق DIV تراكب أعلى الرسم البياني لشرحين:http://people.iola.dk/olau/flot/examples/annotating.html.
هل هناك طريقة واضحة للاستيلاء على نص وتنسيق محور من داخل Flot وإنشاء مثل هذا التراكب من ذلك؟ أو، هل هناك طريقة أفضل أفضل لتتراكم ملصقات المحور أعلى الرسم البياني؟
المحلول
طريقة واحدة، والتي ليست نظيفة بشكل خاص ولن تعمل بشكل جيد إذا كنت تخطط لإظهار تسميات علامة 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);
};