将 jqPlot 图保存到图像文件

Posted 2023-05-07

【中文标题】将 jqPlot 图保存到图像文件

【英文标题】：Saving a jqPlot graph to an image file

【发布时间】：2013-02-13 23:59:03

【问题描述】：

我正在使用 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" 
                
                ]
    
); 

需要在上面的代码中添加什么才能将图形保存到图像文件中？

【参考方案1】：

试试这个：

$('#FinancialsLineGraph').jqplotSaveImage()

【参考方案2】：

假设您的绘图正在绘制一个具有“绘图”ID 的 div。 您必须应用本机 jqplotToImageStr() 函数才能将绘图转换为图像。 然后您可以填充另一个 div（例如 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），你可以通过右键单击它来保存它......

【讨论】：

我在行出现错误：var divElem = $(').attr('src', divGraph);

引用没有围绕 标签结束

下载试试这个下载

【参考方案3】：

$('#GraphName').jqplotSaveImage() 但请注意，如果您在刻度上应用了一些自定义样式，则不会将其保存到图像中