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

Я нашел способ, чтобы изменить размер диаграммы, загрузив ее снова, чтобы обновить новую высоту, Тхо это может быть не лучшая практика. Также найден способ привязки каждого столбца и отправки параметра на другую страницу. см. коды ниже.

в моем dashboard.php:

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

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

в chart1.php:

<?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>