Javascript Chart.js在保持纵横比的同时更改窗口大小的高度

我在调整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>

var-barLabel=；
var dataVal1=；
var barData={
标签：barLabel，
数据集：[
{
标签：“确认收入”，
背景颜色：“黄绿色”，
数据：dataVal1，
},
]
};
var barOptions={
回答：是的，
MaintaintAspectRatio:正确
}
var ctx=document.getElementById（“chart1”）.getContext（“2d”）；
如果（$（窗口）.width（）>748）
ctx.canvas.height=160；
其他的
ctx.canvas.height=300；
var chartDisplay=新图表（ctx{
类型：'bar'，
资料来源：巴达塔，
选项：气压选项
});
$（“#图表1”）。点击（
功能（evt）{
//当单击时，应转到通过所选栏月份的链接href
//例如dummy.php？月\年=vardate
});
window.onresize=函数（）{
//window.onresize可以工作，但我不知道如何在保持纵横比的同时调整画布的大小。
如果（$（窗口）.width（）>748）
ctx.canvas.height=160；
其他的
ctx.canvas.height=300；
chartDisplay.resize（）；
}

---

我在这里找到了一种调整图表大小的方法，重新加载图表以刷新新高度，尽管这可能不是最佳做法。还找到了链接每个栏并将参数发送到另一个页面的方法。参见下面的代码

在my dashboard.php中：

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

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

window.onresize=function（）{
$（“#container”）.load（“chart1.php”）；
}
$（“#container”）.load（“chart1.php”）；

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

$（文档）.ready（函数（）{
var-barLabel=；
var dataVal1=；
var-dateFilter=；
var barData={
标签：barLabel，
数据集：[
{
标签：“确认收入”，
背景颜色：“黄绿色”，
数据：dataVal1，
},
]
};
var barOptions={
回答：是的，
MaintaintAspectRatio:正确
}
var ctx=document.getElementById（“chart1”）.getContext（“2d”）；
如果（$（窗口）.width（）>748）
ctx.canvas.height=160；
其他的
ctx.canvas.height=300；
var chartDisplay=新图表（ctx{
类型：'bar'，
资料来源：巴达塔，
选项：气压选项
});
$（“#图表1”）。点击（
职能（e）{
var activebar=chartDisplay.getElementsAtEvent（e）；
var index=activeBars[0][“_index”]；
location.href=“dash_chartdeals.php？filter_date=“+FixedCodeUriComponent（dateFilter[索引]）；
});
});