Ridisegna/ridimensiona i grafici ad alta risoluzione quando si stampa il sito Web

Question

Quando stampo il frame in basso a destra, il testo some text è parzialmente coperto dagli highcharts perché non vengono ridimensionati prima della stampa. Esiste una soluzione per configurare un layout di stampa con il numero @media print per il sito Web e imporre il ridimensionamento/ridimensionamento delle dimensioni dei contenitori per il formato highcharts quando il sito Web viene stampato?

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

Utilizzando ascoltatore che attiverà riflusso per un grafico e dei media query in tabella CSS devono essere stampate in formato insieme durante la stampa di un sito web .

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/

prova in seguito a tutto schermo per un migliore effetto: http://jsfiddle.net/w4ro5xb7/13/show/

Answer 2

qui è un mix di soluzioni diverse, senza bisogno di exporting.js (che aggiunge pulsante di esportazione per tutti i grafici a pagina ...)

La dimensione è riscalato automaticamente, il ripristino dopo stampa.

Testato per lo più su 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; 
    }); 
}