Javascript 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>

---

如果这有什么关系的话，我正在尝试用Chrome打印它

请在jsfiddle.net上以实时演示的形式重复您的示例。您在console中是否收到任何错误？请确保您的浏览器设置为打印背景色-默认情况下，背景色通常不打印，并且您似乎正在使用带有背景色的div，而根本不使用highcharts。。。。？

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