この jsfiddle: Google チャート API の例を参照してください。
チャートをデータテーブルの下ではなく右に表示する方法を明らかにする、この CSS に明らかなものはありますか? または、グラフの場所は Javascript によって制御されていますか? 解決策を教えてください。さまざまな CSS メソッドを試して、データ テーブルからグラフを分割しましたが、うまくいきませんでした。
チャートはブラウザに表示されますが、jsfiddle で動作させることができませんでした。
（PS Javascriptは上記のjsfiddleにあります-かなり長いです...）
HTMLは次のとおりです。
<!DOCTYPE html>
<head>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/attc.googleCharts.js"></script>
<link rel="stylesheet" type="text/css" href="cs/attcSandbox.css">
</head>
<body>
<div class="mainContent">
<table class="left"
title="Attendance Percentages"
id="AttendancePercentages"
summary="pieDescription"
data-attc-createChart="true"
data-attc-colDescription="pieDescription"
data-attc-colValues="pieValues"
data-attc-location="AttendancePercentagesPie"
data-attc-hideTable="true"
data-attc-type="pie"
data-attc-googleOptions='{"is3D":true}'
data-attc-controls='{"showHide":true,"create":true,"chartType":true}'
>
<thead>
<tr>
<th id="pieDescription">Description</th>
<th id="pieValues">Sessions</th>
<th>%</th>
<th>Other</th>
</tr>
</thead>
<tbody>
<tr>
<td>Present</td>
<td>405</td>
<td>89</td>
<td>5</td>
</tr>
<tr>
<td>Missing</td>
<td>1</td>
<td>0</td>
<td>4</td>
</tr>
<tr>
<td>Authorised Absent</td>
<td>36</td>
<td>7</td>
<td>3</td>
</tr>
<tr>
<td>Unauthorised Absent</td>
<td>1</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Late</td>
<td>30</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
<div class="right" id="AttendancePercentagesPie"></div>
</div>
</body>
</html>
CSSは次のとおりです。
/* @media screen { */
/* override css in main */
body{
margin-left: 5px; margin-right: 5px;
margin-top:5px;
width:100%;
position:relative;
left:0px;
top:0px;
z-index:0;
background-color:#FFFFFF;
color:#47535E;
font-size:0.7em;
font-family: Calibri, sans-serif;
}
div.left {
border: 2px solid #CFBFAF;
width: 49%;
float: left;
}
div.right {
border: 2px solid #CFBFAF;
width: 49%;
float: right;
}
div.mainContent{
margin-left: 20px; margin-right: 20px;
width:400px;
}
table{
margin-left: auto; margin-right: auto;
width:98%;
border:1px solid #E6E6E6;
border-radius:5px;
box-sizing: border-box;
background-color:#F6F6F6;
border-collapse: collapse;
}
table td,table th{
border:1px solid #E6E6E6;
border-top:1px solid #FFFFFF;
}
table th{
background-color:#FFFFFF;
}
/*attc classes*/
/*attc classes*/
div.attcControls{
width:100%;
border:1px solid #E6E6E6;
border-radius:5px;
box-sizing: border-box;
background-color:#F6F6F6;
}
div.attcControls ul{
overflow:hidden;
padding:2px 2px 2px 2px;
margin:0px;
}
div.attcControls ul li{
margin:0px;
padding:0px 0px 0px 10px;
list-style-type: none;
display: inline;
float:right;
clear:none;
}
div.attcControls ul li a{
border:1px solid #9CDFF7;
border-radius:3px;
box-sizing: border-box;
background-color:#86D6F5;
padding:2px;
color:white;
text-decoration:none;
display:inline-block;
background-image:none;
font-weight:normal;
}
div.attcControls ul li a:hover{
border:1px solid white;
color:#47535E;
}
div.attcControls ul li fieldset{
border:1px solid #9CDFF7;
border-radius:3px;
box-sizing: border-box;
background-color:#86D6F5;
padding:2px;
margin:0px;
color:white;
text-decoration:none;
}
div.attcControls ul li fieldset label{
padding-right:5px;
}
div.attcControls ul li fieldset select{
font-size:1em;
padding:0px;
margin:0px;
}
input.attcEditCheckRadioBoxes{
display: block;
margin-left: auto;
margin-right: auto;
}
/* } */