Przerysuj/Resize highcharts podczas drukowania strony internetowej

Question

Kiedy jestem drukowania w prawym dolnym rogu ramki tekstu some text jest częściowo pokryta przez highcharts bo nie rozmiar przed rozpoczęciem drukowania. Czy istnieje rozwiązanie umożliwiające skonfigurowanie układu drukowania z adresem @media print dla witryny internetowej i zmusić highcharts do przerysowania/zmiany wielkości kontenera po wydrukowaniu witryny?

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="height: 400px"></div> 
<div id="container" style="height: 400px"></div> 

JavaScript

$(function() { 
    Highcharts.setOptions({ // Apply to all charts 
     chart: { 
      events: { 
       beforePrint: function() { 
        this.oldhasUserSize = this.hasUserSize; 
        this.resetParams = [this.chartWidth, this.chartHeight, false]; 
        this.setSize(600, 400, false); 
       }, 
       afterPrint: function() { 
        this.setSize.apply(this, this.resetParams); 
        this.hasUserSize = this.oldhasUserSize; 
       } 
      } 
     } 
    }); 

    $('#container').highcharts({ 

     title: { 
      text: 'Rescale to print' 
     }, 

     subtitle: { 
      text: 'Click the context menu and choose "Print chart".<br>The chart size is set to 600x400 and restored after print.' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 

    }); 

}); 

JSFiddle

Answer 1

Korzystanie słuchacza, który spowoduje zmianę układu na wykresie i mediów zapytań w tabeli CSS podczas drukowania na stronie internetowej powinny być wydrukowane w wielkości zadanej .

JS:

$(function() { 
    Highcharts.setOptions({ // Apply to all charts 
     chart: { 
      events: { 
       beforePrint: function() { 
        this.oldhasUserSize = this.hasUserSize; 
        this.resetParams = [this.chartWidth, this.chartHeight, false]; 
        this.setSize(600, 400, false); 
       }, 
       afterPrint: function() { 
        this.setSize.apply(this, this.resetParams); 
        this.hasUserSize = this.oldhasUserSize; 
       } 
      } 
     } 
    }); 

    $('#container').highcharts({ 
     title: { 
      text: 'Rescale to print' 
     }, 
     subtitle: { 
      text: 'Click the context menu and choose "Print chart".<br>The chart size is set to 600x400 and restored after print.' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 

    var printUpdate = function() { 
     $('#container').highcharts().reflow(); 
    }; 

    if (window.matchMedia) { 
     var mediaQueryList = window.matchMedia('print'); 
     mediaQueryList.addListener(function (mql) { 
      printUpdate(); 
     }); 
    } 
}); 

CSS:

@page { 
    size: A4; 
    margin: 0; 
} 
@media print { 
    html, body { 
     padding:0px; 
     margin:0px; 
     width: 210mm; 
     height: 297mm; 
    } 
    #container { 
     float:left; 
     padding: 0px; 
     margin: 0px; 
     width: 80%; 
    } 
} 

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="height: 400px;"></div> 

JSFiddle: http://jsfiddle.net/w4ro5xb7/13/

testu w wyniku pełnego ekranu dla lepszego efektu: http://jsfiddle.net/w4ro5xb7/13/show/

Answer 2

Tutaj jest mieszanką różnych rozwiązań, bez konieczności exporting.js (które dodaje przycisk eksportu do wszystkich wykresów na stronie ...)

Rozmiar jest automatycznie przeskalowany, reset po wydruku.

Testowany głównie na IE

window.onbeforeprint = function() { 
    $(Highcharts.charts).each(function(i,chart){ 
     chart.oldhasUserSize = chart.hasUserSize; 
     chart.resetParams = [chart.chartWidth, chart.chartHeight, false]; 

     var height = chart.renderTo.clientHeight; 
     var width = chart.renderTo.clientWidth; 
     chart.setSize(width, height); 
    }); 
} 
window.onafterprint = function() { 
    $(Highcharts.charts).each(function(i,chart){ 
     chart.setSize.apply(chart, chart.resetParams); 
     chart.hasUserSize = chart.oldhasUserSize; 
    }); 
}