web-dev-qa-db-fra.com

Définition de la largeur de Google Charts lors du chargement

J'ai cette google chart sur mon site web . C’est un graphique à nuage pour le moment, mais je voudrais une solution pour tous les types de graphiques . Si vous chargez le site avec une fenêtre de 700 pixels de large, par exemple, les dimensions du graphique ne sont pas réactives: le graphique est trop large. . Ci-dessous, le code que j'utilise.

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();       }

Edit: Il semble que la div #chart_div ait la bonne taille (celle que j’ai définie avec css), mais le graphique à l’intérieur de cette div n’adapte pas sa taille ... il reste verrouillé avec Voir l’image: enter image description here

jquerychartsresponsive-designgoogle-visualization
11
Louis

Comme les graphiques de l'API de visualisation ne répondent pas du tout, vous devez tout gérer vous-même. En règle générale, cela signifie qu’il faut écouter l’événement "redimensionner" de la fenêtre et redessiner ensuite votre graphique (en définissant les dimensions appropriées):

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

Pour moi, rien de ce qui précède n'a fonctionné ou ils étaient trop complexes pour que je puisse l'essayer.

La solution que j'ai trouvée est simple et fonctionne parfaitement. Il s’agit simplement de construire un graphique Google normal, dans mon cas un graphique en anneau, puis de le styler en utilisant CSS.

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

C'est tout. Bien entendu, vous pouvez définir d'autres valeurs pour largeur maximale, zoom et marges afin que votre graphique s'adapte parfaitement. Mon graphique est 800x600 ( vous pouvez le voir ici ).

5
Olaf

mettez width 100% du graphique et appelez la fonction de redimensionnement comme ci-dessous

$(window).resize(function(){
   yourCallingChartFunction();
});
3
Azhar Ahmad

Pour les travaux réactifs en charge:

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

Bien que cela ne fonctionne pas lorsque la taille de l'écran change pendant la session.

2
Airon Roosalu

Si vous utilisez Twitter Bootstrap, depuis la version 3.2, vous pouvez utiliser les styles embed-responsive:

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

Ou si vous voulez le format 4: 3:

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

La meilleure solution consiste à modifier l'affichage du graphique à mesure que la fenêtre est redimensionnée:

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart); 
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Value');
data.addColumn('number', 'Sites');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['valueA', 57, 'Value A is 57', 'stroke-color: #000; stroke-width: 1'],
['valueB', 19, 'Value B is 19', 'stroke-color: #000; stroke-width: 1'],
['valueC', 25, 'Value C is 25', 'stroke-color: #000; stroke-width: 1']
]);
var options = {
colors: ['#fff2af'],
hAxis: {textPosition: 'none',textStyle:{color:'#fff'}},
vAxis: {gridlines: {color: '#fff'},textStyle:{color:'#fff'}},
legend: {position: 'none'},
backgroundColor: '#aadaff'
};
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, options);
$(window).resize(function(){
var view = new google.visualization.DataView(data);
chart.draw(view, options);
})
}
0
abdulmnam

Un extrait de redimensionnement plus efficace est présenté ci-dessous et peut être réutilisé;

//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();
});
0
Alex

Il suffit de ne pas définir la propriété "width" sur le graphique JS. Cela définira la largeur automatiquement sur le temps de chargement.

Un code:

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {
            title: "Density of Precious Metals, in g/cm^3",
            height: 400
	    //width: 1100, <--- DON'T SET THIS OPTION, it will be set automatically depending on the size of the container div
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

<!--Div that will hold the pie chart-->
<div id="chart_div" class="mt-3" style="height: 400px; width: 100%; border: 1px solid #CCCCCC"></div>

0
César León