0

我使用以下代码生成了一些很棒的图表Chart Code，并且能够将“导出”图像流式传输到浏览器，使用Export Code.

我现在的问题是，如何将导出图像的背景颜色更改为黑色而不是透明？是的，我需要图表背景保持透明，而不是渲染的 dataUrl。

图表代码：

<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");
}
4

1 回答 1

1

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

于 2013-08-30T23:54:46.657 回答