Domyślny rozmiar wykresu Google

Question

Mam wykres Google o wartości 500 pikseli na 500 pikseli, ale zwraca 400 pikseli na 200 pikseli. Spojrzałem na div, i pokazuje 500x500. Nie mam powodu, dla którego wykres powróci na 400 x 200. element div pokazuje 500 x 500, ale prostokąt w formacie SVG pokazuje 400x200, zmniejszając wszystkie obrazy.

Czy istnieje ustawienie, którego nie znam?

<div class="span5"> 
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div> 
</div> 
    <script type="text/javascript"> 
    var data, options, chart; 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    data = google.visualization.arrayToDataTable([ 
     ['Qual', 'Stat'], 
     ['Patient Satisfaction',  {{ $stats->attributes['sa_ptsatisfaction'] }}], 
     ['Medical Knowledge',  {{ $stats->attributes['sa_medknowledge'] }}], 
     ['ER Procedural Skills', {{ $stats->attributes['sa_erprocskills'] }}], 
     ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}], 
     ['Speed', {{ $stats->attributes['sa_speed'] }}], 
     ['Compassion', {{ $stats->attributes['sa_compassion'] }}], 
     ['EMR Utilization Skills', {{ $stats->attributes['sa_emr'] }}], 
     ['Profession Teamwork Skills', {{ $stats->attributes['sa_proftmwrkskills'] }}] 
    ]); 

    options = { 
     title: 'My Daily Activities' 
     ,chartArea:{left:0,top:0,width:"100%",height:"100%"} 
    }; 

    chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

    function adjustChart(nm, vl) { 
    for (var r=0; r<data.D.length; r++) { 
     if (data.D[r].c[0].v == nm) { 
     data.D[r].c[1].v = parseInt(vl); 
     break; 
     } 
    } 
    chart.draw(data, options); 
    } 
</script> 

Answer 1

Istnieje kilka sposobów na ustawienie rozmiaru wykresu.

Pierwszy to ustawienie rozmiaru elementu, który je zawiera. Domyślnie wykres będzie miał szerokość i wysokość elementu zawierającego (see Google Visualization documentation for default values of height/width).

Drugim jest nie określają rzeczywisty rozmiar elementu, a zamiast ustawić wysokość/szerokość wykresu do 500px każdego ręcznie dodając ci do opcji:

options = { 
    title: 'My Daily Activities' 
    ,chartArea:{left:0,top:0,width:"100%",height:"100%"} 
    ,height: 500 
    ,width: 500 
}; 

Co to są rzeczywiście robi w twoim kodzie ustawia rozmiar samego wykresu (nie całego elementu wykresu z osiami, etykietami i legendami). Spowoduje to, że obszar wykresu stanie się 500px przez 500px, jeśli wskażesz odpowiedni div wskazany przez @ Dr.Molle w komentarzach.

Zakładając, że nie chcemy, nowe opcje byłyby:

options = { 
    title: 'My Daily Activities' 
    ,height: 500 
    ,width: 500 
}; 

Answer 2

Więc ustawienie wysokość i szerokość jak w utworach odpowiedziami JMAC, ale jeśli chcesz to reaguje istnieją pewne dodatkowe rzeczy Musiałem zrobić.

Ale tylko do tworzenia kopii zapasowych drugi powód mam ten problem w 1. miejscu jest: Div, że ten wykres jest wyświetlany w jest niewidoczna Po załadowaniu strony.

Widziane tutaj ukryty Wykres Szerokość jest Niewłaściwy 400 przez 200: jsfiddle.net/muc7ejn3/6/

Widziane tutaj ukryty Wykres Szerokość jest Prawidłowe: jsfiddle.net/muc7ejn3/7/

Innym sposobem na to jest tylko Un-ukryć Chart tuż przed chart.draw() jest wywoływana, następnie ukryć je ponownie, coś takiego:

tempShowChart(); 
chart.draw(view, options); 
hideChartAgain(); 

nie obsługiwać zmiana rozmiaru okna.