打印圖表後，另一個圖表在頁面

中不可見我使用兩個高圖表（Highcharts.JS v4.1.6）並行的實例，但是當我試圖使用導出功能打印圖表時，另一個圖表在打印命令時不可見完成。打印圖表後，另一個圖表在頁面

圖配置：

var chart1, chart2; 
    var options, options2; 

    options = { 

     title: { 
      text: '', 
      floating: true, 
      align: 'left', 
      width: 610, 

      style: { 
       fontSize: '1.4em' 
      } 

     }, 
     chart: { 
      renderTo: 'content1', 
      type: 'bar', 
      marginLeft: 210, 
      marginTop: 80, 
      spacingBottom: 15, 
      spacingLeft: 10, 
      spacingRight: 10 
     }, 

     credits: { 
      enabled: false 
     }, 
     credits: { 
      text: 'Source: xxxx', 
      href: '', 
      position: { 
       align: 'right', 

       x: -30, 
       y: -3 
      } 
     }, 
     exporting: { 

      buttons: { 
       contextButton: { 
        align: 'right', 
        x: 2, 
        y: 10, 
        text: 'Download', 
        verticalAlign: 'top' 
       } 
      } 
     }, 
     xAxis: { 
      categories: [], 

      labels: { 
       step: 1, 
       enabled: true, 
       formatter: function() { 
        var text = this.value, 
         formatted = text.length > 25 ? text.substring(0, 30) : text; 

        return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>'; 
       }, 
       style: { 

        fontSize: '12px' 
       } 
      } 
     }, 
     yAxis: { 
      max: 100, 
      plotLines: [{ 
        color: 'black', 
        dashStyle: 'Solid', 
        value: 0, 
        width: 2 
       }, { 
        color: 'black', 
        width: 2, 
        value: 50 
       } 


      ], 
      title: { 
       text: '' 
      }, 
     }, 
     legend: { 
      itemStyle: { 
       color: '#000000', 
       fontWeight: '' 
      }, 
      layout: 'horizontal', 
      align: 'center', 
      x: 1, 
      verticalAlign: 'top', 
      y: 35, 
      floating: true, 
      backgroundColor: '#FFFFFF', 
      reversed: true 

     }, 
     tooltip: { 
      style: { 
       padding: 30 
      }, 

      formatter: function() { 
       return '' + 
        '<strong>' + this.x + '</strong><br>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%"; 
      } 
     }, 
     plotOptions: { 
      series: { 
       grouping: true, 
       pointPadding: 0, 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        crop: false, 
        formatter: function() { 
         return this.y.toFixed(1); 
        } 
       } 

      } 
     }, 
     series: [], 

    } 



    options2 = { 

     title: { 
      text: '' 
     }, 
     chart: { 
      renderTo: 'content2', 
      type: 'bar', 

      spacingBottom: 15, 

      spacingLeft: 10, 
      spacingRight: 10, 
      marginTop: 80 
     }, 


     credits: { 
      text: 'Source: xxx', 
      href: '', 
      position: { 
       align: 'right', 

       x: -30, 
       y: -3 
      } 
     }, 
     exporting: { 

      buttons: { 
       contextButton: { 
        align: 'right', 
        x: 2, 
        y: 10, 
        text: 'Download', 
        verticalAlign: 'top' 
       } 
      } 
     }, 



     xAxis: { 
      categories: [], 

      labels: { 
       enabled: false, 
       step: 1, 
       overflow: 'justify', 
       crop: false, 
       formatter: function() { 
        var text = this.value, 
         formatted = text.length > 25 ? text.substring(0, 30) : text; 

        return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>'; 
       }, 
       style: { 

        fontSize: '12px' 
       } 
      } 
     }, 
     yAxis: { 
      plotLines: [{ 
       color: 'black', 
       dashStyle: 'Solid', 
       value: 0, 
       width: 2 
      }], 
      title: { 
       text: '' 
      }, 

     }, 
     legend: { 
      itemStyle: { 
       color: '#000000', 
       fontWeight: '' 
      }, 
      layout: 'horizontal', 
      align: 'center', 
      x: 1, 
      verticalAlign: 'top', 
      y: 35, 
      floating: true, 
      backgroundColor: '#FFFFFF', 
      reversed: true 

     }, 
     tooltip: { 
      style: { 
       padding: 30 
      }, 

      formatter: function() { 
       return '' + 
        '<strong>' + this.x + '</strong><br>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%"; 
      } 
     }, 
     plotOptions: { 
      series: { 

       dataLabels: { 
        enabled: true, 
        crop: false, 
        formatter: function() { 
         return this.y.toFixed(1); 
        } 

       } 
      } 
     }, 
     series: [], 
    }

打印圖表前：

打印後，當使用左側圖表導出打印按鈕：

打印後，當使用右側圖表導出打印按鈕：

當打印圖是用來否則工作well.I無法弄清楚這個問題會發生這種情況。請幫幫我。

謝謝。

來源

2016-04-13 Sameek Mishra

我參考瞭解決我的問題的下面的代碼。

var beforePrint = function() 
     { 

     chart1 = jQuery('#content1').highcharts(); 
     chartWidth1 = chart1.chartWidth; 
     chartHeight1 = chart1.chartHeight; 
     chart1.setSize(578,chartHeight1, false); 

     chart2 = jQuery('#content2').highcharts(); 
     chartWidth2 = chart2.chartWidth; 
     chartHeight2 = chart2.chartHeight; 
     chart2.setSize(405,chartHeight2, false); 
    }; 

    var afterPrint = function() { 
     chart1.setSize(chartWidth1,chartHeight1, false); 
     chart1.hasUserSize = null; // This makes chart responsive 

     chart2.setSize(chartWidth2,chartHeight2, false); 
     chart2.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;

來源

2016-04-14 11:20:52

打印圖表後，另一個圖表在頁面

回答

相關問題