chart.js在移動視圖中調整高度

我需要獲取chart.js來調整圖表的高度，當我將網站切換到移動視圖時，我使用的引導程序作爲我的框架工作正常。chart.js在移動視圖中調整高度

移動視圖網站的問題是圖形太小而無法與之交互。

我試着在var options = {}中添加屬性，但沒有運氣我甚至嘗試過在css中使用高度屬性，但沒有運氣！

請幫忙！

這裏的網站：

http://preview.qaxawkzy7e6d2t9vhswkar3v1n8w7b9p705un9k2ojkbj4i.box.codeanywhere.com/

和代碼：

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, minimal-scale=1.0, maximum-scale=1.0,"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script> 
    </head> 
    <body style="padding: 20px;"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div class="well"> 
      <canvas id="myChart"></canvas> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="well"> 
      <h1>Hi there!</h1> 
     </div> 
     </div> 
    </div> 
    <script> 
     var ctx = document.getElementById("myChart"); 

     var myChart = new Chart(ctx, { 
      type: 'bar', 
      options: { 
       responsive: true, 
      }, 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3], 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 206, 86, 0.2)', 
         'rgba(75, 192, 192, 0.2)', 
         'rgba(153, 102, 255, 0.2)', 
         'rgba(255, 159, 64, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(255, 206, 86, 1)', 
         'rgba(75, 192, 192, 1)', 
         'rgba(153, 102, 255, 1)', 
         'rgba(255, 159, 64, 1)' 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
     }); 
    </script> 
    </body> 
</html>

來源

2016-08-10 howzitCAL

我相信答案是設置圖表的maintainAspectRatio: false選項，然後設置圖表minimum height響應，如果屏幕寬度達到一定的大小。

來源

2017-06-07 03:56:04 John

chart.js在移動視圖中調整高度

回答

相關問題