2013-02-13 228 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(),但请注意,如果您有蜱,进行一些自定义的样式,这将不会被