Redraw/Größe Highcharts beim Drucken der Website

Question

Wenn ich den unteren rechten Rahmen drucken wird der Text some text teilweise durch die Highcharts abgedeckt, weil sie nicht die Größe vor dem Drucken ändern. Gibt es eine Lösung, um ein Drucklayout mit @media print für die Website zu konfigurieren und Highcharts zu erzwingen, um beim Drucken der Website die Containergröße zu ändern?

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

Hörer verwenden, das Reflow für ein Diagramm und Medienabfragen in CSS-Chart auslösen sollte in festgelegter Größe gedruckt werden, wenn eine Website drucken .

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/

-Test in Folge Vollbild für eine bessere Wirkung: 0.123.926 Hier

Answer 2

ist eine Mischung aus verschiedenen Lösungen, ohne die Notwendigkeit von exporting.js (die Taste auf Seite auf alle Diagramme exportieren fügt ...)

Die Größe automatisch neu skaliert wird, wird die Rückstellung nach Druck.

Getestet meist auf 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; 
    }); 
}