[英]Chart.js change height on window resize while maintaining aspect ratio
我在調整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>
我找到了一種方法來重新調整圖表的大小,再次加載它以刷新新的高度,這可能不是最好的做法。 還找到了一種鏈接每個欄並將參數發送到另一個頁面的方法。 看下面的代碼。
在我的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.