Chart.js更改窗口上的高度在保持宽高比的同时调整大小答案

【问题标题】：Chart.js change height on window resize while maintaining aspect ratioChart.js更改窗口上的高度在保持宽高比的同时调整大小
【发布时间】：2017-03-27 15:55:29
【问题描述】：

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

【问题讨论】：

标签： javascript php jquery chart.js

【解决方案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>

【讨论】：