如何导出透明背景的amChart？

这里，是我的代码：

var chartData = [{ 
     "country": "USA", 
     "visits": 4025, 
     "color": "#FF0F00" 
    }, { 
     "country": "China", 
     "visits": 1882, 
     "color": "#FF6600" 
    }, { 
     "country": "Japan", 
     "visits": 1809, 
     "color": "#FF9E01" 
    }, { 
     "country": "Germany", 
     "visits": 1322, 
     "color": "#FCD202" 
    }, { 
     "country": "UK", 
     "visits": 1122, 
     "color": "#F8FF01" 
    }, { 
     "country": "France", 
     "visits": 1114, 
     "color": "#B0DE09" 
    }, { 
     "country": "India", 
     "visits": 984, 
     "color": "#04D215" 
    }, { 
     "country": "Spain", 
     "visits": 711, 
     "color": "#0D8ECF" 
    }, { 
     "country": "Netherlands", 
     "visits": 665, 
     "color": "#0D52D1" 
    }, { 
     "country": "Russia", 
     "visits": 580, 
     "color": "#2A0CD0" 
    }, { 
     "country": "South Korea", 
     "visits": 443, 
     "color": "#8A0CCF" 
    }, { 
     "country": "Canada", 
     "visits": 441, 
     "color": "#CD0D74" 
    }, { 
     "country": "Brazil", 
     "visits": 395, 
     "color": "#754DEB" 
    }, { 
     "country": "Italy", 
     "visits": 386, 
     "color": "#DDDDDD" 
    }, { 
     "country": "Australia", 
     "visits": 384, 
     "color": "#999999" 
    }, { 
     "country": "Taiwan", 
     "visits": 338, 
     "color": "#333333" 
    }, { 
     "country": "Poland", 
     "visits": 328, 
     "color": "#000000" 
    }]; 


    var chart = AmCharts.makeChart("chartdiv", { 
     type: "serial", 
     theme: "light", 
     dataProvider: [{ 
      "year": 2005, 
      "income": 23.5, 
      "expenses": 18.1 
     }, { 
      "year": 2006, 
      "income": 26.2, 
      "expenses": 22.8 
     }, { 
      "year": 2007, 
      "income": 30.1, 
      "expenses": 23.9 
     }, { 
      "year": 2008, 
      "income": 29.5, 
      "expenses": 25.1 
     }, { 
      "year": 2009, 
      "income": 24.6, 
      "expenses": 25 
     }], 
     categoryField: "year", 
     startDuration: 1, 
     rotate: true, 

     categoryAxis: { 
      gridPosition: "start" 
     }, 
     valueAxes: [{ 
      position: "top", 
      title: "Million USD", 
      minorGridEnabled: true 
     }], 
     graphs: [{ 
      type: "column", 
      title: "Income", 
      valueField: "income", 
      fillAlphas: 1, 
      balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 
     }, { 
      type: "line", 
      title: "Expenses", 
      valueField: "expenses", 
      lineThickness: 2, 
      bullet: "round", 
      balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>" 
     }], 
     legend: { 
      useGraphSettings: true 
     } 

    }); 
    var image = new Image(); 
    var btn = document.getElementById('export'); 
    btn.onclick = function() { 
     var tmp = new AmCharts.AmExport(chart); 
     tmp.init(); 
     tmp.output({ 
      output: 'datastring', 
      format: 'jpg', "backgroundColor": "gray", 
      "backgroundAlpha": 0.3, 




     }, function (blob) { 

      image.src = blob; 

      console.log(image.src); 
      document.body.appendChild(image); 

      // var doc = new jsPDF('landscape'); 
      // doc.addImage(image, 'JPEG', 10, 10); 
      // doc.save('testingPDF.pdf'); 
      printGraph1(); 
     }); 

    function printGraph1() { 
     var source = "../../Content/images/print-background.png"; 
     var html = "<html style=' margin:0;height:100%;overflow:hidden;'><head><script>function step1(){\n" + 
       "setTimeout('step2()', 10);}\n" + 
       "function step2(){window.print();window.close()}\n" + 
       "</scri" + "pt><link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'><style type='text/css' media='print'></style></head><body style=' margin:0;height:100%;overflow:hidden;' onload='step1()' style='background-image: url(' " + source + "')'>\n" + 
       "<img src='" + source + "' style=' min-height:100%; min-width:100%;height:auto;width:auto;position:absolute; margin:auto;z-index:-1; '/>"; 


     //$(".chartdata").height(700); 
     //$(".chartdata").width(300); 
     // $("#chart").css({'position': 'absolute', 'margin': 'auto', 'top': '0', 'right': '0','bottom': '0' ,'left': '0'}); 
     // var divContent = $(".chartdata").html(); 
     //var image1 = new Image(); 
     //image1.src = image.src; 

     console.log(image.src); 
     var divCon = "<div style='width:100% position: absolute; margin: auto; top: 30%; right: 0;bottom: 0; left: 0; '>"; 
     var divConEnd = "</div>"; 
     //var imgDiv = "<div id='imge'></div>"; 
     //$("#imge").appendChild(image); 
     //var img = "<img src='" + image.src + "/>"; 

     Pagelink = "about:blank"; 
     var pwa = window.open(Pagelink, "_new"); 

     pwa.document.open(); 

     pwa.document.write(html); 

     //pwa.document.write(divCon); 
     pwa.document.write("<div style=' position: absolute; margin: auto; top: 30%; '>"); 
     pwa.document.write("<img style=' background-color:blue; 'src='" + image.src + "'/>"); 
     //pwa.document.body.appendChild(image); 
     pwa.document.write("</div>"); 
     // pwa.document.write(divConEnd); 
     pwa.document.write("<button type='submit' class='btn btn-primary'>Submit</button>"); 
     pwa.document.write('</body ></html>'); 
     pwa.document.close(); 
    }

enter image description here

来源

2016-08-17 Mahmood Ali

你好，欢迎来到StackOverflow。请花一些时间阅读帮助页面，尤其是名为[“我可以询问什么主题？”（http://stackoverflow.com/help/on-topic）和[“我应该问什么类型的问题避免问？“]（http://stackoverflow.com/help/dont-ask）。更重要的是，请阅读[Stack Overflow问题清单]（http://meta.stackexchange.com/q/156810/204922）。您可能还想了解[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 – gerric

使用 “transaprent” 为backgroundColor：

tmp.output({ 
    "output": "datastring", 
    "format": "png", 
    "backgroundColor": "transparent", 
    "backgroundAlpha": 0.3 
}, ...

请注意，您需要使用支持透明度的图像格式像PNG一样。 JPEG不支持它。

来源

2016-08-17 10:00:15 martynasma

如何导出透明背景的amChart？

回答

相关问题