Question

如何以透明背景导出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

Answer 1

将“transaprent”用作backgroundColor：

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

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

如何以透明背景导出amChart？

1 个答案: