하이 차트 : 지정된 버튼이없는 차트 인쇄

Question

표준 브라우저의 인쇄 기능으로 하이 차트 컨트롤이있는 전체 페이지를 인쇄 할 수 있기를 바랍니다. 그러나 통제가 끊어지고있다. 나는 .chart-wrapper 사업부에서 제어 포장 및 인쇄에 대한 고정 폭을 설정하려고 :

@media print { 
    .chart-wrapper{ 
     width: 1000px; 
    } 
} 
.chart-wrapper{ 
    width: 100%; 
} 

을하지만 그것은 작동하지 않습니다, 그리고 인쇄 된 페이지는 다음과 같습니다 : I 외부 1000px로 .chart-wrapper 폭을 설정하면

@media print 블록 차트는 페이지와 인쇄 된 페이지에서 1000px 너비를 갖지만 인쇄되지 않은 페이지의 너비를 모두 차지하려면 차트가 필요합니다.

그래서 차트를 인쇄되지 않은 페이지와 인쇄 된 페이지에 1000px로 100 % 너비로 표시 할 수 있습니까?

Answer 1

@media 화면 CSS 블록 안에 화면 너비를 설정해 보았습니까?

@media print { 
    .chart-wrapper{ 
     width: 1000px; 
    } 
} 

@media screen { 
    .chart-wrapper{ 
     width: 100%; 
    } 

} 

Answer 2

이것은 나를 위해 일했습니다.

<script> 
(function() { 

    var beforePrint = function() { 
     chart = jQuery('#graphArea').highcharts(); 
     chartWidth = chart.chartWidth; 
     chartHeight = chart.chartHeight; 
     chart.setSize(670,chartHeight, false);     
    }; 

    var afterPrint = function() { 
     chart.setSize(chartWidth,chartHeight, false); 
     chart.hasUserSize = null; // This makes chart responsive 
    }; 

    if (window.matchMedia) { 
     var mediaQueryList = window.matchMedia('print'); 
     mediaQueryList.addListener(function(mql) { 
      if (mql.matches) { 
       beforePrint(); 
      } else { 
       afterPrint(); 
      } 
     }); 
    } 

    window.onbeforeprint = beforePrint; 
    window.onafterprint = afterPrint; 
}()); 

</script> 

작동 방법 : 이벤트 '인쇄 후'감지 (A4를 인쇄하는 신뢰할 수있는 폭) 670에 차트의 크기를 조정, 이벤트 '인쇄하기 전에'검색 및 원래 크기로 차트의 크기를 조정합니다.

크레디트 : TJ VanToll은 인쇄 이벤트 기능을 감지하기 위해 this thread의 하이 차트 크기 조정 기능을 제공하고 this answer은 670px를 제안합니다.