najlepsza praktyka dla responsywnych wykresów Google

Question

Mam to google chart on a my website. Na razie jest to wykres Scatter, ale chciałbym znaleźć rozwiązanie dla wszystkich typów wykresów. Jeśli na przykład załadujesz witrynę o szerokości 700 na piksel, wymiary wykresu nie odpowiadają: wykres jest zbyt szeroki. Poniżej znajduje się kod, którego używam.

Czy możesz mi pomóc?

Dzięki

HTML:

<div id="chart_div"></div> 

CSS:

#chart_div { 
    width:100%; 
    height:20%; 
} 

JS:

var options = { 
     title: 'Weight of pro surfer vs. Volume of his pro model', 
     hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55 
     vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40}, //20 
     legend: 'none', 
      width: '100%', 
      height: '100%', 
      colors: ['#000000'], 
      series: { 
        1: { color: '#06b4c8' }, 
       }, 
     legend: {position: 'top right', textStyle: {fontSize: 8}}, 
     chartArea: {width: '60%'}, 
      trendlines: { 0: {//type: 'exponential', 
        visibleInLegend: true, 
        color: 'grey', 
        lineWidth: 2, 
        opacity: 0.2, 
        labelInLegend: 'Linear trendline\n(Performance)' 
        } 
       } // Draw a trendline for data series 0. 
    }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));   
    chart.draw(data, options); 
    google.visualization.events.addListener(chart, 'ready', myReadyHandler()); 

    function myReadyHandler() { 
     chartDrawn.resolve();  } 

Edycja: Wydaje się, że div #chart_div ma odpowiedni rozmiar (The taki, który jestem i CSS), ale wykres wewnątrz tego div nie dostosować jego rozmiar ... to pozostaje zablokowana Zobacz obraz:

Answer 1

Od Wizualizacja API wykresy nie reagują w ogóle, trzeba obsłużyć wszystko na własną rękę. Zazwyczaj oznacza to, nasłuchując oknie „resize” zdarzenie i odświeżanie wykresu następnie (ustawienie dowolne wymiary jak właściwe):

function resize() { 
    // change dimensions if necessary 
    chart.draw(data, options); 
} 
if (window.addEventListener) { 
    window.addEventListener('resize', resize); 
} 
else { 
    window.attachEvent('onresize', resize); 
} 

Answer 2

znalazłem ten przykładowy kod pióra przydatnych: Code pen example of Google Charts Responsive one zrobić przerysować wykres w oknie zmiana rozmiaru za pomocą jQuery:

$(window).resize(function(){ 
    yourCartdrawChartfuntion(); 
}); 

Answer 3

Dla reaguje na obciążenie działa:

#chart_div { 
width:inherit; 
height:inherit; 
} 

Mimo, że nie robi działa, gdy zmienia się rozmiar ekranu podczas sesji.

Answer 4

szerokość umieścić 100% wykresu i wywołania funkcji zmiany rozmiaru jak poniżej

$(window).resize(function(){ 
    yourCallingChartFunction(); 
}); 

Answer 5

bardziej wydajny skalowanie fragment jest poniżej i wielokrotnego użytku;

//bind a resizing function to the window 
$(window).resize(function() { 
    if(this.resizeTO) clearTimeout(this.resizeTO); 
    this.resizeTO = setTimeout(function() { 
     $(this).trigger('resizeEnd'); 
}, 500); 
}); 
//usage of resizeEnd 

$(window).bind('resizeEnd', function() { 
    DoSomething(); 
}); 

Answer 6

Dla mnie żaden z powyższych nie działał lub były zbyt skomplikowane, aby spróbować.

Rozwiązanie, które znalazłem jest proste i działa idealnie. Polega ona po prostu na tworzeniu normalnego wykresu Google, w moim przypadku wykresu pączków, a następnie stylizowaniu go za pomocą CSS.

@media screen and (max-width: 1080px) { 
    div#donutchart { 
     zoom:0.6; 
     margin-left:-16%; 
    } 
} 

To wszystko. Oczywiście możesz ustawić inne wartości dla maksymalnej szerokości, powiększenia i marginesów, aby twój wykres idealnie pasował. Mój wykres to 800 x 600 (you can see it here).

Answer 7

Jeśli korzystasz z usługi Twitter Bootstrap, od wersji 3.2 można wykorzystać do embed-responsive style:

<div class="embed-responsive embed-responsive-16by9"> 
    <div id="chart_div" class="embed-responsive-item"></div> 
</div> 

Albo jeśli chcesz stosunek 4: 3 Format obrazu:

<div class="embed-responsive embed-responsive-4by3"> 
    <div id="chart_div" class="embed-responsive-item"></div> 
</div>