谷歌图表导出为带背景的图像


Google Charts Exporting as Image with Background

我使用以下代码Chart Code制作了一些很棒的图表,并且能够使用Export Code将"导出"的图像流式传输到浏览器,而不会出现任何问题。

我现在的问题是,如何将导出图像的背景颜色更改为完全黑色而不是透明?是的,我需要图表背景保持透明,只是不需要呈现的数据URL。

图表代码:

<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var $dUrl = "/assets/php/charts/chart.data.php?which=<?php echo (isset($which)) ? $which : 4; ?>&d=<?php echo (isset($d)) ? $d : null; ?>&dl=<?php echo (isset($dl)) ? $dl : null; ?>";
        jQuery.ajax({
            method: 'post',
            url: $dUrl,
            cache: false,
            async: true,
            dataType: "json",
            data:{'_t':Math.floor(+new Date() / 1000)},
            beforeSend: function(){
                jQuery('#<?php echo $where; ?>').html('<div id="frmLoadingImageWrapper"><img src="/assets/images/ajax-loader.gif" alt="loading..." height="11" width="16" /></div>');
            },
            success: function(d, status, xhr){
                var data = new google.visualization.DataTable(d);
                var options = {
                    'colors': ['red', 'blue', 'yellow'],
                    'width': '97%', 
                    'height': 280, 
                    'backgroundColor': 'none',
                    'hAxis': {'textStyle': {color: 'white', fontName: 'Calibri', 
                        fontSize: '12'}},
                    'vAxis': {'textStyle': {color: 'white', fontName: 'Calibri', 
                        fontSize: '12'}},
                    'legendTextStyle': {color: 'white', fontName: 'Calibri', 
                        fontSize: '12'}
                };
                setTimeout(function(){
                    var chart = new google.visualization.ColumnChart(document.getElementById(<?php echo '"' . $where . '"'; ?>));
                    chart.draw(data, options);
                }, 1);
            },
            error: function(xhr, status, msg){
                console.log(status + ':' + msg + ':::WHICH->' + <?php echo '"' . $where . '"'; ?>);
            }   
        });
    }
</script>

出口代码:

// Save Charts as Images
function getImgData(chartContainer) {
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var doc = chartContainer.ownerDocument;
    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
        'style',
        'position: absolute; ' +
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;' + 
        'background:#000 !important;'); // <- does not change the background color
    doc.body.appendChild(canvas);
    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");
    canvas.parentNode.removeChild(canvas);
    return imgData;
}
function saveAsImg(chartContainer) {
    var imgData = getImgData(document.getElementById(chartContainer));
    window.open(imgData, '');
//  window.location = imgData;//.replace("image/png", "image/octet-stream");
}

在不知道canvg库是如何工作的情况下,我唯一能建议的做法是用黑色背景重新绘制图表,将其转换为图像,然后用透明背景重新绘制该图表。这不是一个特别优雅的解决方案,但它应该有效。