jqplotをRetina対応にする

JavaScriptで素敵なグラフを作成できることで人気のjqplotですが、これをRedinaディスプレイに対応させる方法があったのでご紹介します。

initCanvasメソッドを修正

jquery.jqplot.js の 194行目付近にある this.initCanvas メソッドを置き換えます。

改善前

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }
    return canvas;
};

改善後

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }

    var cctx = canvas.getContext('2d');

    var canvasBackingScale = 1;
    if (window.devicePixelRatio > 1 && (cctx.webkitBackingStorePixelRatio === undefined ||
        cctx.webkitBackingStorePixelRatio < 2)) {
        canvasBackingScale = window.devicePixelRatio;
    }
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = canvasBackingScale * canvas.width;
    canvas.height = canvasBackingScale * canvas.height;
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    cctx.save();

    cctx.scale(canvasBackingScale, canvasBackingScale);

    return canvas;
};

圧縮版jqplotのRetina対応箇所

min.jsで圧縮されている場合は以下の箇所を修正します。圧縮版の特徴として「$（ドルマーク）」が「L」に変換されているので注意してください。