वेबसाइट प्रिंट करते समय हाईचार्ट का पुनर्विक्रय/आकार बदलें

Question

जब मैं नीचे दाएं फ्रेम को प्रिंट कर रहा हूं तो टेक्स्ट some text आंशिक रूप से हाइचार्ट्स द्वारा कवर किया गया है क्योंकि वे प्रिंटिंग से पहले आकार बदलते नहीं हैं। वेबसाइट के लिए @media print के साथ प्रिंटिंग लेआउट को कॉन्फ़िगर करने का कोई समाधान है और जब वेबसाइट मुद्रित होती है तो कंटेनर आकार में पुनर्वितरण/आकार बदलने के लिए हाईचार्ट्स को बल दें?

एचटीएमएल

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

जावास्क्रिप्ट

$(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

श्रोता का उपयोग करना है कि सीएसएस चार्ट में एक चार्ट और मीडिया के प्रश्नों के लिए पुनर्प्रवाहित ट्रिगर किया जाएगा सेट आकार में मुद्रित किया जाना चाहिए जब एक वेबसाइट को प्रिंट ।

जे एस:

$(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(); 
     }); 
    } 
}); 

सीएसएस:

@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/

टेस्ट: 0,123,

Answer 2

यहां विभिन्न समाधान का मिश्रण, exporting.js की कोई जरूरत नहीं के साथ (जो पृष्ठ पर सभी रेखांकन के लिए बटन निर्यात जोड़ता ...)

आकार स्वचालित रूप से पुनः पैमाना है, प्रिंट के बाद रीसेट है।

StackOverflow करने के लिए आईई

पर

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; 
    }); 
}