Chart.jsアスペクト比を維持しながらウィンドウの高さを変更

Question

chart.jsキャンバスのサイズを変更する際に問題が発生しました。 キャンバスの高さを160に設定してより広い画面で見栄えがよくなるようにしましたが、アスペクト比を維持したまま窮屈に見えないように、小さな画面で高さを300に変更する必要があります。

また、それぞれのラベルの月を渡すリンクにつながるバーにonclickイベントを追加したいと思います。

おかげでたくさんここに私のコードは

<div> 
<canvas id="chart1" width="500" height="300"></canvas> 
</div> 

<script> 
var barLabel = <?php echo json_encode(array_reverse($ch1_arrDate)); ?>; 
var dataVal1 = <?php echo json_encode(array_reverse($ch1_arrRevenue_conf)); ?>; 
var barData = { 
    labels: barLabel, 
    datasets: [ 
     { 
      label: 'Confirmed Revenue', 
      backgroundColor: 'yellowgreen', 
      data: dataVal1, 

     }, 
    ] 
}; 

var barOptions = { 
    responsive: true, 
    maintainAspectRatio: true 
} 

var ctx = document.getElementById("chart1").getContext("2d"); 

if($(window).width()>748) 
    ctx.canvas.height = 160; 
else 
    ctx.canvas.height = 300; 

var chartDisplay = new Chart(ctx, { 
    type: 'bar', 
    data: barData, 
    options: barOptions 
}); 

$("#chart1").click( 
    function(evt){ 

    //supposed to when clicked goes to a linked href passing the month of the selected bar 
    // e.g dummy.php?month_year=vardate 
}); 

window.onresize = function() { 

//the window.onresize works but i dont know how to resize the canvas while maintaining the aspect ratio. 
if($(window).width()>748) 
    ctx.canvas.height = 160; 
else 
    ctx.canvas.height = 300; 

chartDisplay.resize(); 
} 
</script> 

bar graph

Answer 1

だ私はそれがベストプラクティスではないかもしれないカントー、新しい高さをリフレッシュするために、再びそれをロードすることにより、グラフのサイズを変更するためにここに方法を見つけました。また、各バーをリンクし、別のページにパラメータを送信する方法も見つかりました。以下のコードを参照してください。 chart1.phpで

<script> 
window.onresize=function(){ 
    $("#container").load("chart1.php"); 
} 

$("#container").load("chart1.php"); 
</script> 

：

<?php 
//myqueries here for $ch1_arrDate,$ch1_arrRevenue_conf, and $ch1_arrDate2 
?> 
<div> 
    <canvas id="chart1" width="500" height="300"></canvas> 
</div> 


<script> 
$(document).ready(function(){ 
var barLabel = <?php echo json_encode(array_reverse($ch1_arrDate)); ?>; 
var dataVal1 = <?php echo json_encode(array_reverse($ch1_arrRevenue_conf)); ?>; 
var dateFilter = <?php echo json_encode(array_reverse($ch1_arrDate2)); ?>; 

var barData = { 
    labels: barLabel, 
    datasets: [ 
     { 
      label: 'Confirmed Revenue', 
      backgroundColor: 'yellowgreen', 
      data: dataVal1, 
     }, 
    ] 
}; 

var barOptions = { 
    responsive: true, 
    maintainAspectRatio: true 
} 


var ctx = document.getElementById("chart1").getContext("2d"); 

if($(window).width()>748) 
    ctx.canvas.height = 160; 
else 
    ctx.canvas.height = 300; 

var chartDisplay = new Chart(ctx, { 
    type: 'bar', 
    data: barData, 
    options: barOptions 
}); 

$("#chart1").click( 
    function(e){ 
     var activeBars = chartDisplay.getElementsAtEvent(e); 
     var index = activeBars[0]["_index"]; 
     location.href="dash_chartdeals.php?filter_date="+fixedEncodeURIComponent(dateFilter[index]); 
}); 
}); 
</script> 

私dashboard.phpで