如何在窗口大小調整上使Highchart圖形響應？

High Chart Graph 如何在窗口大小調整上使Highchart圖形響應？

這裏我附上了我的代碼。我想在窗口大小調整上作出響應。請儘早給我一個解決方案。

Highcharts.chart('containerChart', { 
     chart: { 
      type: 'bar', 
      marginLeft: 0, 
      marginTop: 100 
     }, 
     title: { 
      text: 'Reject Category', 
      align: 'left', 
      x: 30, 
      y: 35, 
      style: { 
       color: '#666666', 
       fontWeight: 'normal', 
       fontSize: 12, 
       fontFamily: 'Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif', 
      } 
     }, 
     tooltip: { 
      enabled: false, 
      valueSuffix: ' %', 

      } 
     }, 
     exporting: { 
      enabled: false, 
     }, 
     credits: { 
      enabled: false, 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: false 
       }, 

      }, 
      series: { 
       pointWidth: 25, 

       }, states: { 
        hover: { 
         enabled: false 
        } 
       } 
      }, 

     }, 
     xAxis: [{ 
      categories: arrcategory, 
      width: 100, 
      left: 140, 
      height: 34 * ctglength, 
      lineWidth: 0, 
      minorGridLineWidth: 0, 
      minorTickLength: 0, 
      // tickLength: 0, 
      title: { 
       text: null, 
      }, 
      labels: { 
       overflow: 'justify', 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 

       } 

      }, 
      gridLineWidth: 0 
     }, { 
      categories: true, 
      linkedTo: 0, 
      width: 100, 
      height: 34 * ctglength, 
      left: 358, 
      visible: false 
     }], 
     yAxis: [{ 
      min: 0, 
      max: 100, 
      width: 400, 
      left: 140, 
      //gridLineWidth: 0, 
      labels: { 
       overflow: 'justify', 
       enabled: false 
      }, 
      title: { 
       text: '# of Transactions', 
       "textAlign": 'right', 
       "rotation": 0, 
       x: 15, 
       y: -310 
      }, 

     }, { 
      min: 0, 
      max: 100, 
      left: 700, 
      width: 400, 
      // gridLineWidth: 0, 
      labels: { 
       overflow: 'justify', 
       enabled: false 
      }, 
      title: { 
       text: '$ in Premium', 
       "textAlign": 'right', 
       "rotation": 0, 
       x: 10, 
       y: -330 
      }, 
     }], 
     series: [{ 
      data: arrdata1, 
      color: '#E95E4F', 
      showInLegend: false, 
      //enableMouseTracking: false, 
      dataLabels: { 
       overflow: false, 
       enabled: true, 
       crop: false, 



     }, { 
      data: arrdata2, 
      color: '#E95E4F', 
      showInLegend: false, 
      //enableMouseTracking: false, 
      dataLabels: { 
       overflow: false, 
       enabled: true, 
       crop: false, 

      }, 
      yAxis: 1, 
      xAxis: 1 
     }] 
    });

來源

2017-04-27 Botsa Santosh

添加[MCVE]（ https://stackoverflow.com/help/mcve）question –

嘗試的setSize在window.onresize圖表，設置烏爾圖表中var和設置高度和寬度內獲得輸入值

myChart= Highcharts.chart....your chart config function 

window.onresize = function() { 
    var w = window.innerWidth; 
    var h = window.innerHeight; 

    myChart.setSize(w, h); 
}

jsfiddle.net/pdy5w1ta/1

來源

2017-04-27 08:01:25 Ferus7

我想你說什麼，但它不工作... –

http://jsfiddle.net/pdy5w1ta/1/ – Ferus7

我在問上面的圖。您的解決方案適用於單軸圖表。但我在單獨的div使用多軸，那麼它不工作 –

如何在窗口大小調整上使Highchart圖形響應？

回答

相關問題