在自己的 HTML 列中插入 Google 图表而不溢出其他列

Question

我的 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' 元素中插入了饼图，这是页面的右栏。

Answer 1

尝试缩小图表的 z-index，这会将其发回...

看起来您需要更改 css 中的选择器，因为您使用的是 id

#rightwork { 
   width: auto;
   overflow: hidden;
   z-index: -1;
}

在自己的 HTML 列中插入 Google 图表而不溢出其他列

Inserting a Google Chart inside its own HTML column without overflowing other columns

html

javascript

css

google-visualization