it-swarm.com.de

Festlegen der Breite von Google Charts beim Laden

Ich habe dieses Google-Diagramm auf einer meiner Websites . Es ist momentan ein Scatter-Diagramm, aber ich möchte die Lösung für alle Arten von Diagrammen. Wenn Sie beispielsweise die Site mit einem Fenster mit einer Breite von 700 Pixeln laden, reagieren die Diagrammmaße nicht: Das Diagramm ist zu breit . Unten ist der Code, den ich verwende.

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: Es scheint, dass der div #chart_div die richtige Größe hat (die, die ich mit css gesetzt habe), aber das Diagramm in diesem div passt seine Größe nicht an ... es bleibt mit .__ gesperrt. Siehe das Bild: enter image description here

11
Louis

Da die Visualisierungs-API-Diagramme überhaupt nicht reagieren, müssen Sie alles selbst erledigen. In der Regel bedeutet dies, auf das Fenster "Größenänderung" zu achten und das Diagramm anschließend neu zu zeichnen (gegebenenfalls die gewünschten Abmessungen festzulegen):

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

Für mich funktionierte nichts davon oder sie waren zu komplex, als dass ich es versuchen könnte.

Die Lösung, die ich gefunden habe, ist einfach und funktioniert perfekt. Dazu wird lediglich ein normales Google-Diagramm, in meinem Fall ein Donut-Diagramm, erstellt und anschließend mit CSS gestaltet.

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

Das ist alles. Natürlich können Sie auch andere Werte für die maximale Breite, den Zoom und die Ränder festlegen, damit Ihr Diagramm perfekt passt. Mein Chart ist 800x600 ( Sie können es hier sehen ).

5
Olaf

geben Sie width 100% des Diagramms ein und rufen Sie die Größenänderung-Funktion wie folgt auf

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

Für reaktionsschnelle Arbeiten:

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

Obwohl es nicht funktioniert, wenn sich die Bildschirmgröße während der Sitzung ändert.

2
Airon Roosalu

Wenn Sie Twitter Bootstrap verwenden, können Sie seit Version 3.2 die embed-responsive-Stile nutzen:

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

Oder wenn Sie ein Seitenverhältnis von 4: 3 wünschen:

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

Die beste Lösung besteht darin, die Diagrammansicht bei geänderter Fenstergröße zu ändern:

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

Ein effizienteres Größenänderungs-Snippet befindet sich unten und kann wiederverwendet werden.

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

Setzen Sie einfach nicht die Eigenschaft "width" im Diagramm JS. Dadurch wird die Breite automatisch beim Laden eingestellt.

Etwas 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