كيفية حفظ (الحفاظ) حالة تكبير الرسوم البيانية للطفرات على التحديث مع Ajax

Question

لديّ تطبيق بسيط يقود بيانات استطلاعات الرأي للبيانات كل دقيقة. عندما يتم جلب بيانات جديدة ، أقوم بتحديث الرسم البياني باستخدام AJAX. ومع ذلك ، كلما قمت بتحديث الرسم البياني (أعد تجميعه بقيم جديدة مضاف إلى بيانات مؤامرة) يتم فقد الحالة الحالية للتكبير. قبل تحديث الرسم البياني ، أريد الحفاظ على أحدث وضع للتكبير. بعد تحديث الرسم البياني ، أريد تكبير الرسم البياني إلى موضعه المحفوظ. هذا أمر مهم لأن إعادة التقييم في كل دقيقة مزعجة. هل هذا ممكن؟

Answer 1

هنا هو الجواب لجوشوا فارنر 1

عندما تحصل على بياناتك الجديدة قبل إعادة المؤامرة ، احصل على التكبير الحالي وإضافته إلى الخيارات الموجودة في التحديث.

// Get the current zoom
var zoom = plot.getAxes();

// Add the zoom to standard options
var zoomed = {};
$.extend(zoomed,options);
zoomed.xaxis.min = zoom.xaxis.min;
zoomed.xaxis.max = zoom.xaxis.max;
zoomed.yaxis.min = zoom.yaxis.min;
zoomed.yaxis.max = zoom.yaxis.max;

// draw/save the plot
plot = $.plot($("#graph"), d, zoomed);

Answer 2

لقد جربت هذه الإجابة من Ozan ولم أتمكن من الحصول على الكتلة لنسخ التكبير إلى العمل ، لذا استخدمت للتو Plot.getOptions () واستخدمت ذلك لرسم الرسم البياني. مثله:

var oldOptions = plot.getOptions();
plot = $.plot($("#graph"), data, oldOptions);

وبهذه الطريقة ، يمكنك تغيير عرضك ديناميكيًا وسيتم تحديث التحديث التلقائي دون تغيير عرضك.

Answer 3

يجب عليك الحصول على معلومات حول حالة المحاور الحالية ، ودمجها بخياراتك الأولية وتوفيرها للمؤامرة الجديدة.

// Deep copy of the options object so that we can keep it unchanged
// for when we don't want to preserve the zoom.
var copyOptions = $.extend(true, {}, options);

if (plot != null && preserveZoom) {
    // There might be more than one Y axis
    var zoomY = plot.getYAxes();

    for (var i = 0; i < zoomY.length; i++) {
        copyOptions.yaxes[i].min = zoomY[i].min;
        copyOptions.yaxes[i].max = zoomY[i].max;
    }

    // Considering only one X axis, in case of more than one
    // you should use the same method as for the Y axis.
    copyOptions.xaxis.min = plot.getXAxes()[0].min;
    copyOptions.xaxis.max = plot.getXAxes()[0].max;
}

plot = $.plot("#placeholder", data, copyOptions);