2017-10-03 11 views
1

私はグラフを反応的にしようとしています。私はこのコードを(以下のように)追加して、私のグラフを反応させるようにしました。しかし、まだそれは動作していません。誰かが私にそれを理解するのを助けることができますか?ありがとうございました。Googleの円グラフは反応しません。

<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は、私のグラフの画像です。

答えて

0

あなたの幅は常に800です。それをウィンドウサイズに正当化し、必要に応じてボックスに入れ子にするために数式を実行します。

width : window.innerWidth, 

このリンクを参照して、より良いコードを記述してください。あなたが書いた方法はパフォーマンスの問題があります。 JQuery: How to call RESIZE event only once it's FINISHED resizing?

+0

ここでは、幅と高さを設定せずにコードを調整します。私はまだ.resize関数を使用します。私は自分のコードに取り組んでいます。しかし、問題は私のグラフが小さすぎるように見える、私はラベルを読むことができません。ここで私のグラフを見ることができます - > http://smkphp.ukm.my/domainexpert/ –

+0

今私のグラフは小さくなりました。 –

+0

fiddle plzを作成します。 – DragonKnight

関連する問題