2
Я создал тестовый проект от google chart example. Но, после добавления некоторого текста css из графика, это missed, как показано ниже. Что я делаю не так?Текст диаграммы Google отсутствует
Это 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;
}
И HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Report Template</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jsapi.js"></script>
<script type="text/javascript">
// 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});
}
</script>
</head>
<body>
<header>
<div class="FirstTopLine">
<div class="wrapper">
<div class="cellone">
</div>
<div class="celltwo">
<h4 class="companyfont">28.05.2013</h4>
</div>
<div class="cellfree">
</div>
<div class="cellfour">
</div>
</div>
</div>
<div class="SecondTopLine">
<div class="wrapper">
<div class="cellone">
</div>
<div class="celltwo">
<a href="http://gharysh.kz" class="logo">
<img src="img/logoKGS.png" alt="Kazakhstan Gharysh Sapari" />
</a>
</div>
<div class="cellfree">
<h1 class="reportname">Report Name 23</h1>
</div>
<div class="cellfour">
</div>
</div>
</div>
</header>
<section>
<div class="wrapper">
<div class="cellone">
</div>
<div class="celltwo">
<div class="chartdescription">
<h3 class="companyfont">Report Description 32</h3>
</div>
</div>
<div class="cellfree">
<h2 class="companyfont">Chart 33</h2>
<div id="chart_div">
</div>
</div>
<div class="cellfour">
<h2 class="companyfont">Table 34</h2>
<div id="table">
</div>
</div>
</div>
</section>
<footer>
<div class="wrapper">
<div class="cellone">
</div>
<div class="celltwo">
<h6 class="reportname">Generated from SMDPO 42</h6>
</div>
<div class="cellfree">
</div>
<div class="cellfour">
</div>
</div>
</footer>
</body>
</html>
Благодаря 
P.S. Я не уверен в правильности CSS, поэтому, если вы знаете, как настроить css быстро, легко, просто и ясно, пожалуйста, поделитесь.
Можете ли вы опубликовать css, который вы добавили? – qwerty
Спасибо, я забыл об этом – Kaha