Google Graphique à secteurs non réactif

Question

J'essaie de rendre mon tableau réactif. J'ai ajouté ce code (comme ci-dessous) pour rendre mon tableau réactif. Mais ça ne marche toujours pas. Quelqu'un peut-il m'aider à le comprendre? Je vous remercie.

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

Graph est l'image de mon graphique.

Answer 1

votre largeur est toujours 800. justifiez-le à la taille de la fenêtre et faites le calcul pour le faire nicher dans votre boîte comme vous le souhaitez.

width : window.innerWidth, 

voir ce lien et écrire un meilleur code. la façon dont vous avez écrit a un problème de performance. JQuery: How to call RESIZE event only once it's FINISHED resizing?