Falta el texto del gráfico de Google

Creé el proyecto de prueba del ejemplo de Google Chart . Pero luego, después de agregar un poco de texto css desde el gráfico, se está perdiendo así a continuación. ¿Qué estoy haciendo mal?

Esto es CSS:

html, body { font-size: 100%; height: 100%; width: 100%; } body { background: white; color: #030404; padding: 0; margin: 0; font-family: "Tahoma", "SergoUI", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; } header { height: 20%; } section { height: 75%; } footer { height: 5%; } .FirstTopLine { height: 20%; } .SecondTopLine { height: 80%; } .SecondTopLine, footer { background: #1b7297; background:linear-gradient(270deg, #1b7297, #3dafc9) ; } div { /*background: wheat;*/ height: 100%; width: 100%; } .wrapper { width: 100%; height: 100%; } .cellone { float: left; width: 5%; clear: both; } .celltwo { float: left; width: 15%; } .cellfree { float: left; width: 40%; } .cellfour { float: left; width: 40%; } img { max-height: 100%; max-width: 100%; } .reportname { color: #f7ad36; } .companyfont { color: #1b7297; } 

Y HTML:

      Report Template    // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart', 'table']}); // Set a callback to run when the Google Visualization API is loaded. google.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 = google.visualization.arrayToDataTable([ // ['Task', 'Hours per Day'], // ['Work', 11], // ['Eat', 2], // ['Commute', 2], // ['Watch TV', 2], // ['Sleep', 7] // ]); 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' : 'How Much Pizza I Ate Last Night', 'width' : 600, 'height': 400 }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); var table = new google.visualization.Table(document.getElementById('table')); table.draw(data,{showRowNumber: true}); }    

28.05.2013

Report Name 23

Report Description 32

Chart 33

Table 34

Generated from SMDPO 42

Gracias introduzca la descripción de la imagen aquí


PD: No estoy seguro acerca de css correcto, por lo que si conoce la forma de configurar css de forma rápida, fácil, sencilla y clara, por favor, comparta.

Problema

El problema es la etiqueta div en tu CSS:

 div { /*background: wheat;*/ height: 100%; width: 100%; } 

Si observa el objeto HTML después de representar el gráfico con el CSS comentado anteriormente, este es el aspecto del gráfico:

 

Google Charts crea 2 elementos

adicionales dentro del elemento

que creas, y establece el ancho / alto de esos divs a su manera. Hay elementos

adicionales dentro de esos elementos

si profundiza más y contiene elementos como las tags de leyenda y el texto del título. Por lo tanto, establecer una regla CSS universal para todos los elementos

hace que Google se comporte mal y no muestre el texto correctamente.

Solución

Elimine el elemento CSS de div universal y sustitúyalo por uno más localizado para que la API de Google pueda crear sus propios elementos

sin interferencias.

Alternativamente, cree un elemento CSS diferente para los elementos div divisorios que anulan las reglas universales y permiten que Google haga su trabajo.