jqplotToImageStr中的標籤和圖例問題

我正嘗試將一些jqplots傳遞給服務器並生成pdf。這些圖首次生成時看起來很不錯。但是，當我使用jqplotToImageStr數字化它們時，它們沒有正確縮放，生成的pdf也是如此。所以我的問題是如何在將這些圖數字化時設置繪圖大小/尺寸。jqplotToImageStr中的標籤和圖例問題

讚揚我用於數字化

var imgData = []; 
imgData.push($('#chart1').jqplotToImageStr({}));

之前數字化 enter image description here

enter image description here

後添加選項後 enter image description here

來源

2013-10-28 tao.hong

您可以使用繪圖工具調整軸標籤/ set z-index的邊距。在$ .jqplot之前調用它。

$.jqplot.postDrawHooks.push(function() { 
    $(".jqplot-grid-canvas").css('z-index', '0'); 
    $(".jqplot-series-canvas").css('z-index', '1'); 
    $(".jqplot-overlayCanvas-canvas").css('z-index', '2'); 
    $('.jqplot-yaxis-tick').css('margin-right', '-50px'); 
    $('.jqplot-yaxis-tick').css('z-index', '3'); 
});

jqplotToImageStr將軸標籤推到圖表後面。所以我用畫布重新繪製了我需要的順序。您當然需要對圖例進行更改。對於軸標籤，您必須確保使用CanvasAxisLabelRenderer和CanvasAxisTickRenderer以及$ .jqplot.config.enablePlugins = true;

下面輸出圖片的代碼。

function jqplotToImg(obj) { 
    var newCanvas = document.createElement("canvas"); 
    newCanvas.width = obj.find("canvas.jqplot-base-canvas").width(); 
    newCanvas.height = obj.find("canvas.jqplot-base-canvas").height(); 
    var baseOffset = obj.find("canvas.jqplot-base-canvas").offset(); 

    // make white background for pasting 
    var context = newCanvas.getContext("2d"); 
    context.fillStyle = "rgba(255,255,255,1)"; 
    context.fillRect(0, 0, newCanvas.width, newCanvas.height); 

    obj.children().each(function() { 

     if ($(this)[0].tagName.toLowerCase() == 'canvas') { 
      // all canvas from the chart 
      var offset = $(this).offset(); 
      newCanvas.getContext("2d").drawImage(this, 
         offset.left - baseOffset.left, 
         offset.top - baseOffset.top 
        ); 
     } // for the div's with the X and Y axis 
    }); 

    obj.children().each(function() { 
     if ($(this)[0].tagName.toLowerCase() == 'div') { 
      if ($(this).attr('class') == "jqplot-axis jqplot-yaxis") { 

       $(this).children("canvas").each(function() { 
        var offset = $(this).offset(); 
        newCanvas.getContext("2d").drawImage(this, 
           offset.left - baseOffset.left, 
           offset.top - baseOffset.top 
          ); 
       }); 
      } 
      else if ($(this).attr('class') == "jqplot-axis jqplot-xaxis") { 

       $(this).children("canvas").each(function() { 
        var offset = $(this).offset(); 
        newCanvas.getContext("2d").drawImage(this, 
           offset.left - baseOffset.left, 
           offset.top - baseOffset.top 
          ); 
       }); 
      } 
     } 
    });

希望它有幫助！

來源

2013-10-30 08:30:06 Bipindas

謝謝，它的工作！ –

這些都是你可以指定的選項：

var imgData = []; 
var options = { 
    x_offset : <value>, 
    y_offset : <value>, 
    backgroundColor : <value> 
}; 
imgData.push($('#chart1').jqplotToImageStr(options));

我認爲您可以更改x_offset和y_offset以獲得您想要的預期結果。

來源

2013-10-28 19:45:47 Gyandeep

感謝您的回覆。 '選項'真的移動了情節，但它沒有解決覆蓋問題或缺少的圖例（更新圖）。 –

jqplotToImageStr中的標籤和圖例問題

回答

相關問題