我的 HTML 页面有两列。固定宽度的左列和剩余宽度的右列。我写在左栏的应该留在左边，我写在右栏的应该留在右边。
列至少可以很好地处理文本
我正在尝试在右栏中插入 Google 饼图。但它不起作用:图像与左列重叠。
饼图重叠并隐藏了左列的一部分。那不是我想要的。
怎么了？
这是我的 HTML 页面:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body onload=display()>
<title>Test</title>
<div class="leftimage">
LEFT IMAGE<br>
...
</div>
<div id="rightwork">
RIGHT WORK
Blah blah blah just filling with some text we don't care about
...
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
这是我的 CSS 的相关部分:
.leftimage {
width: 180px;
float: left;
}
.rightwork {
width: auto;
overflow: hidden;
}
这是我的 javascript。请注意，前几个函数是为了确保加载 google 图表库。我不知道这样做是否正确，但它确实有效。
function load_google_charts() {
console.log("loading google charts library...");
google.load("visualization", "1", {packages:["corechart"]});
// Set a callback to run when the Google Charts library is loaded.
google.setOnLoadCallback(set_google_charts);
}
var google_charts_loaded = false;
if (! google_charts_loaded) {
load_google_charts();
}
function set_google_charts() {
console.log("google charts library is loaded");
google_charts_loaded = true;
}
function display() {
var pieData = new Array(['Sample','Score'],
['A', 10],
['B', 40]);
if (! google_charts_loaded) {
load_google_charts();
}
if (google_charts_loaded) {
var chartdata = google.visualization.arrayToDataTable(pieData);
var chart = new google.visualization.PieChart(document.getElementById("rightwork"));
chart.draw(chartdata);
}
}
最后，您会看到我将饼图插入到我的 HTML 页面的“rightwork”元素中，该元素应该是页面的右栏。
最佳答案
尝试减少图表的 z-index，这会将其发回...
看起来您需要更改 css 中的选择器，因为您使用的是 id
#rightwork {
width: auto;
overflow: hidden;
z-index: -1;
}
关于javascript - 在其自己的 HTML 列中插入 Google Chart 而不会溢出其他列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32397286/