Highcharts条形图无法正确打印

Question

我有一张使用Highcharts的条形图。在屏幕上看起来像这样：

但是当我去打印时它看起来像这样：

所以当我去打印时基本上没有任何东西出现。这是我正在使用的JavaScript。

function qm_load_barcharts(qmsr_data) {
var bar_width = 200;
$('#profile-barchart tbody tr').each(function() {
    $(this).children('td').eq(4).each(function() {

        // Get the div id.
        var $div_id = $(this).children('div').eq(0).attr('id');

        // From the div id reconstitute the pfx in proper form.
        var pfx = $div_id.replace(/^x/, '');
        pfx = pfx.replace(/_/g, '.');
        pfx = pfx.replace(/-/, '/');

        // Look up our indicator values for the prefix.
        var active_cnt     = qmsr_data[pfx]['active'];
        var latent_cnt     = qmsr_data[pfx]['latent'];
        var indicators_cnt = qmsr_data[pfx]['indicators'];

        // Set our bar segment sizes.
        var total = active_cnt + latent_cnt + indicators_cnt;
        var active_size;
        var latent_size;
        var indicators_size;

        if (active_cnt == 0) {
            active_size = 0;
        }
        else {
            active_size = Math.round((active_cnt/total) * bar_width);
        }

        if (latent_cnt == 0) {
            latent_size = 0;
        }
        else {
            latent_size = Math.round((latent_cnt/total) * bar_width);
        }

        if (indicators_cnt == 0) {
            indicators_size = 0;
        }
        else {
            indicators_size = Math.round((indicators_cnt/total) * bar_width);
        }

        if ((active_cnt + latent_cnt + indicators_cnt) == 0) {
            // Perfect score, so make one full-width gray bar.
            $('#' + $div_id).children('div.active-bar').eq(0).css("background-color", "#ababab");
            $('#' + $div_id).children('div').eq(0).width(bar_width + 'px');
            $('#' + $div_id).children('div').eq(1).width('0px');
            $('#' + $div_id).children('div').eq(2).width('0px');
        }
        else {
            // Set div sizes proportionately.
            $('#' + $div_id).children('div').eq(0).width(active_size + 'px');
            $('#' + $div_id).children('div').eq(1).width(latent_size + 'px');
            $('#' + $div_id).children('div').eq(2).width(indicators_size + 'px');

            // Set values inside dives.
            $('#' + $div_id).children('div.active-bar').children('div').eq(0).html(active_cnt);
            $('#' + $div_id).children('div.latent-bar').children('div').eq(0).html(latent_cnt);
            $('#' + $div_id).children('div.indicators-bar').children('div').eq(0).html(indicators_cnt);
        }
    });
});
}

这是HTML：

<div id="<%= $pfx_id %>" class='qmsr-barchart'>
 <div class='active-bar'>
 <div class='hidden-nugget'></div>
 &nbsp;
 </div>
 <div class='latent-bar'>
 <div class='hidden-nugget'></div>
 &nbsp;
 </div>
 <div class='indicators-bar'>
 <div class='hidden-nugget'></div>
 &nbsp;
 </div>
 </div>

这是打印视图CSS：

 @media print {
.active-bar {
    background-color: #A74A44;
}
.latent-bar {
    background-color: #EB8104;
}
.indicators-bar {
    background-color: #E6E714;
}
}

我正在尝试在Chrome中打印它，如果这很重要的话。