2013-02-13 225 views
2

我正在使用jqPlot在某些網頁上顯示許多圖。我希望能夠將這些圖表保存爲圖像文件。將jqPlot圖保存爲圖像文件

這樣做的最好方法是什麼?是否有可能在圖形上有一個右鍵菜單選項,使圖形能夠保存到圖像文件中?

這裏是我的圖的一個部分代碼:

var plotCogsLineGraph = $.jqplot('FinancialsLineGraph', [[30,31,34,40,45], [34,38,31,42,38]], 
{ 
      axes: 
      { 
       xaxis: 
       { 
         ticks: ['5','4','3','2','1'] 
       }, 
       yaxis: 
       { 
        label:'%', 
        pad: 1.05, 
        ticks: ['0','15','30','45','60'] 
       } 
      }, 

      width: 480, height: 270, 
      legend:{show:true, location: 's', placement: 'insideGrid', renderer: $.jqplot.EnhancedLegendRenderer}, 
    seriesDefaults: 
    { 
       rendererOptions: {smooth: true} 
    }, 
    series:[ 
       { 
        lineWidth:1, 
        label:'COGS', 
        markerOptions: { size:1, style:'dimaond' } 
       }, 
       { 
        lineWidth:1, 
        label:'Wages', 
        markerOptions: { size: 1, style:"dimaond" } 
       } 
       ] 
    } 
); 

什麼需要添加到這個上面的代碼,以使圖形保存爲圖像文件?

回答

2

假設您的情節正在以'情節'ID繪製一個div。 您必須應用原生jqplotToImageStr({})函數才能將圖轉換爲圖像。 然後你可以爲了顯示這個新生成的圖像填充一個其他分區(使用id =「graphicImage的」爲例):

var graphicImage = $('#graphicImage'); 
if(graphicImage.html() == ""){ //If the image was even generated, don't generate it again 
    var divGraph = $('#plot').jqplotToImageStr({}); 
    var divElem = $('<img/>').attr('src', divGraph); 
    graphicImage.html(divElem); 
} 

爲了下載圖片,你可以這樣做:

open(divGraph.toDataURL("image/png")); 

在我的情況下,它不起作用,因爲我的電腦上下載的圖像已損壞。 如果你找到一種方法來保存它,我會很高興聽到它。

無論如何,一旦你做了這樣的回答(填寫與圖像對應jqplot了「#graphicImage」 DIV)的第一部分,你可以感謝它保存在其上點擊右鍵...

+0

我得到一個錯誤的行保存到圖片中:var divElem = $(」 ) .attr('src',divGraph); – user2023359 2013-02-14 23:03:24

+0

報價並未終止標籤 – AnthonyLeGovic 2013-02-15 07:25:47

+2

下載試試這個Download 2013-09-17 08:47:25

8

試試這個:

$('#FinancialsLineGraph').jqplotSaveImage() 
1

$('#GraphName').jqplotSaveImage(),但請注意,如果您有蜱,進行一些自定義的樣式,這將不會被