javascript - Jqplot donut chart 图例在保存时被删除

Question

我正在使用 jqplot 创建一个 donut chart ，图例显示在外部网格中。
当我尝试将图表另存为 png 时，在生成的图像中，图例变为空。

var imgData = $('#placeholder')
  .jqplotToImageStr({});
tit = "donutChart"
var fileName = tit + '.png'
var downloadLink = document.createElement("a");
downloadLink.href = imgData;
downloadLink.download = fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

rend = $.jqplot.DonutRenderer;
pie = [10,20,30,40,50]
                	series = [pie];
                    ticky = [];
                    tickx = [];
                    var myLabels=[],labelTotal=0;
                    $(pie).map(function(){labelTotal += this[1];})
                    myLabels = $.makeArray($(pie).map(function(){return this[1]+ " ("+Math.round(this[1]/labelTotal * 100) + "%)";}));
                    optionsObj = {
                    		grid:{background:"#ffffff"},
                            fontFamily: 'sans-serif,arial,verdana',
                            highlighter: {
                                show: true,
                                sizeAdjust: 10,
                                tooltipLocation: 'n',
                                tooltipAxes: 'y',
                                tooltipFormatString: '<b><i><span style="color:#ffffff;">Count:</span></i></b> %d',
                                useAxesFormatters: false
                            },
                            /*cursor: {
                                show: true,
                                zoom: true,
                                looseZoom: true
                            },*/
                            grid:{
                            	background:'#ffffff'
                            },
                            legend: {
                            	renderer: $.jqplot.EnhancedLegendRenderer, 
                            	rendererOptions: {numberRows : 18,numberColumns:2},
                            	location:'e', 
                            	seriesToggle : true,
                            	show: true,
                                placement: 'outsideGrid'
                            },
                            axes: {
                                xaxis: {},
                                yaxis: {}
                            },
                    		   seriesDefaults: {
                    	        renderer:$.jqplot.DonutRenderer,
                    	        rendererOptions:{
                    	          sliceMargin: 1,
                    	          startAngle: -90,
                    	          showDataLabels: true,
                    	          // By default, data labels show the percentage of the donut/pie.
                    	          // You can show the data 'value' or data 'label' instead.
                    	           // "totalLabel=true" uses the centre of the donut for the total amount
                    	          dragable: {
                                      color: '#ff3366',
                                      constrainTo: 'x'
                                  },
                                  isDraggable: true,
                    	          totalLabel: true
                    	        }
                    	      }
                    }
                    var plot1 = $.jqplot('placeholder', series, optionsObj);
                		
                    
 $("#save").on("click",function(){
  var imgData = $('#placeholder').jqplotToImageStr({});
		        		tit="donutChart"
		        		var fileName=tit+'.png'
		        		var downloadLink = document.createElement("a");
		        		downloadLink.href = imgData;
		        		downloadLink.download = fileName;
		        		document.body.appendChild(downloadLink);
		        		downloadLink.click();
		        		document.body.removeChild(downloadLink); 
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" />



<div id="placeholder" style="width:300px;height:300px">

</div>
<button id="save">
Save Image
</button>

Answer 1

你需要包含脚本enhancedPieLegendRenderer.js

<script type="text/javascript" src="../src/plugins/jqplot.enhancedPieLegendRenderer.js"></script>