如何为iOS视网膜显示器设置Flot

我已经在iPad（3代）上测试过了。折线图看起来非常平滑

我已经尝试用我的flot代码来区分代码，但看不到任何显著的差异，这将导致它在视网膜模式下运行。我的flot版本是0.7，和他的代码一样。无论我尝试什么，我自己的图表都以非视网膜模式运行

运行视网膜模式的诀窍是什么？

我的设置代码相当长

function setup_chart0(setup_options) {
    var point_data = [];
    if(setup_options.use_sample_data_for_chart0) {
        point_data = generate_dummy_data(
            setup_options.timestamp_generate_min,
            setup_options.timestamp_generate_max
        );
    }
    var average_data = henderson23(point_data);
    var datasets = make_chart0_datasets(point_data, average_data);

    if(is_dualaxis_detail_mode) {
        datasets = make_chart0_dual_datasets(
            [], 
            [],
            [], 
            []
        );
    }


    var options = default_plot_options();
    options.xaxis.min = setup_options.timestamp_visible_min;
    options.xaxis.max = setup_options.timestamp_visible_max;
    options.xaxis.panRange = [setup_options.timestamp_pan_min, setup_options.timestamp_pan_max];
    options.yaxis.min = -0.025;
    options.yaxis.max = 1.025;
    options.yaxis.panRange = [-0.025, 1.025];
    options.legend = { container: '#legend0', noColumns: 2 };
    options.grid.markings = compute_markings_with_alertlevels;

    if(is_dualaxis_detail_mode) {
        options.y2axis = {};
        options.y2axis.position = "right";
        options.y2axis.min = -0.025;
        options.y2axis.max = 1.025;
        options.y2axis.panRange = [-0.025, 1.025];
        options.legend = { container: '#legend_hidden', noColumns: 2 };
    }

    //save_as_file({ samples: point_data, average: average_data });

    var el_placeholder0 = $("#placeholder0");
    if(el_placeholder0.length){
        //console.log('plotting chart 0');
        var fade = false;
        var el = el_placeholder0;
        var el_outer = $("#placeholder0_outer");
        var original_offset = el_outer.offset();
        if(fade) {
            el_outer.offset({ top: -5000, left: 0 });  // move plot container off screen 
        }
        chart0 = $.plot(el, datasets, options);
        if(fade) {
            el.hide();  // hide plot - must do *after* creation 
            el_outer.offset(original_offset); // put plot back where it belongs 
            el.fadeIn('slow'); // fade in
        }

        /*var s = '   width: ' + chart0.width() + ' height: ' + chart0.height();
        $('#label0').append(s);*/

        if(solo_pan_mode) {
            el.bind('plotpan', function (event, plot) {
                set_data_should_redraw_chart0 = true;
                set_data_should_redraw_chart1 = false;
                set_data_should_redraw_chart2 = false;
                fetch_data_for_chart(chart0, setup_options.timestamp);
                show_loading_empty('#loader1');
                show_loading_empty('#loader2');
            }); 
            el.bind('plotpanend', function (event, plot) {
                set_data_should_redraw_chart0 = true;
                set_data_should_redraw_chart1 = true;
                set_data_should_redraw_chart2 = true;
                copy_min_max(chart0, chart1, '#placeholder1');
                copy_min_max(chart0, chart2, '#placeholder2');
                hack_hide_loading_wheels = true;
                maybe_hide_loading_wheels();
            }); 
        } else {
            el.bind('plotpan', function (event, plot) {
                fetch_data_for_chart(chart0, setup_options.timestamp);
                sync_with_chart0();
            }); 
        }

    }
}

---

我对jquery.flot.js进行了如下修改：

在顶部，我添加了

retinaMode = (window.devicePixelRatio > 1),

我已经扩展了这些功能

function makeCanvas(skipPositioning, cls) {
    var c = document.createElement('canvas');
    c.className = cls;
    c.width = canvasWidth;
    c.height = canvasHeight;

    if (!skipPositioning)
        $(c).css({ position: 'absolute', left: 0, top: 0 });

    $(c).appendTo(placeholder);

    if(retinaMode) {
        c.width = canvasWidth * 2;
        c.height = canvasHeight * 2;
        c.style.width = '' + canvasWidth + 'px';
        c.style.height = '' + canvasHeight + 'px';
    }

    if (!c.getContext) // excanvas hack
        c = window.G_vmlCanvasManager.initElement(c);

    // used for resetting in case we get replotted
    c.getContext("2d").save();

    if (retinaMode) {
         c.getContext("2d").scale(2,2);
    }

    return c;
}

function getCanvasDimensions() {
    canvasWidth = placeholder.width();
    canvasHeight = placeholder.height();

    if (canvasWidth <= 0 || canvasHeight <= 0)
        throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
}

function resizeCanvas(c) {
    // resizing should reset the state (excanvas seems to be
    // buggy though)
    if (c.width != canvasWidth) {
        c.width = canvasWidth;
        if(retinaMode) {
            c.width = canvasWidth * 2;
        }
        c.style.width = '' + canvasWidth + 'px';

    }

    if (c.height != canvasHeight) {
        c.height = canvasHeight;
        if(retinaMode) {
            c.height = canvasHeight * 2;
        }
        c.style.height = '' + canvasHeight + 'px';
    }

    // so try to get back to the initial state (even if it's
    // gone now, this should be safe according to the spec)
    var cctx = c.getContext("2d");
    cctx.restore();

    // and save again
    cctx.save();

    if(retinaMode) {
        cctx.scale(2, 2);
    }
}

函数makeCanvas（跳过定位，cls）{
var c=document.createElement（'canvas'）；
c、 className=cls；
c、 宽度=画布宽度；
c、 高度=画布高度；
如果（！跳过位置）
css（{位置：'absolute'，左：0，上：0}）；
$（c）.附录（占位符）；
if（视网膜模式）{
c、 宽度=画布宽度*2；
c、 高度=画布高度*2；
c、 style.width=''+canvasWidth+'px'；
c、 style.height=''+画布高度+'px'；
}
if（！c.getContext）//excanvas hack
c=window.G_vmlCanvasManager.initElement（c）；
//用于重置，以防我们被替换
c、 getContext（“2d”）.save（）；
if（视网膜模式）{
c、 getContext（“2d”）。比例（2,2）；
}
返回c；
}
函数getCanvasDimensions（）{
canvasWidth=占位符.width（）；
canvasHeight=占位符.height（）；
如果（canvasWidth With retina现在在OSX上可用，您需要处理另一种情况。如果devicePixelRatio为2，则OSX上的Safari将自动将画布背面存储的尺寸加倍。iOS Safari不会这样做，因为内存和视口缩放问题。因此，现在您需要在加倍之前检查context.backingStorePixelRatio是否为1。我应该这样做。）另外，目前这只在Safari 6 beta版中出现。该属性应该是上下文。WebKitBackingsStorePixelRatioi使用0.7和视网膜模式下的模拟器测试了您的答案，我得到了一个图表，它占据了应该占据的四分之一面积。这是在iOS 5.1上。这是因为绘图逻辑仍然认为画布是400x300，即使是虽然我们将它翻了一倍，达到800x600。为了它的价值，我向flot core提交了一个请求，添加了对视网膜显示的支持（包括新的MacBook Pro）：@olivier，看起来很棒。你的补丁很好。谢谢。