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에서