[英]Google Pie Chart Is Not Responsive
I am trying to make my chart responsive. 我试图使我的图表响应。 I have added this code (as below) to make my chart responsive.
我添加了以下代码(如下所示)以使图表响应。 But still it is not working.
但是仍然无法正常工作。 Can somebody help me to figure it out ?
有人可以帮我弄清楚吗? Thank you.
谢谢。
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "<?php echo base_url() . 'index.php/main/lihat_graph' ?>",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: '',
hAxis: {title: 'Jumlah Kepakaran'},
vAxis: {title: 'Jumlah Kepakaran'},
bubble: {textStyle: { fontName: 'arial', fontSize: 12 }},
colors: ['beige','pink','#00ADF9', 'maroon', 'red', 'green', 'purple', 'gray', 'orange']
};
if(data.getNumberOfRows() == 0){
$("#chart_div").append("Graf Bidang Kepakaran masih dalam proses
pengumpulan data. Graf akan dipaparkan setelah proses pengumpulan data
selesai.")
}else{
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
$(window).resize(function(){
drawChart();
});
</script>
your width is always 800. justify it to window size and do the math to make it nest in your box as you want. 您的宽度始终为800。将其调整为窗口大小,然后进行数学运算以使其根据需要嵌套在框中。
width : window.innerWidth,
see this link and write a better code. 看到此链接并编写更好的代码。 the way you wrote has performance issue.
您编写的方式存在性能问题。 JQuery: How to call RESIZE event only once it's FINISHED resizing?
jQuery:仅在完成大小调整后如何调用RESIZE事件?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.