Question

我试图将网页分成3个部分，并为这3个部分中的每个部分添加不同的内容，所以在此之前确保网页分为3个部分：

<!DOCTYPE html>
<html>

<div class="container">
  <div class="leftpane">
    <h1>Test Page</h1></div>
  <div class="middlepane">
    <h1>Test Page</h1>
    <b><p>This text is bold</p>
    <p>let's add more text</p>
    <p>bla bla bla</p></b>

<button><input type="file" id="myFile"></button>
</div>

  <div class="rightpane">
    <h1>Test Page</h1></div>


<style>
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;


}

.middlepane {
    width: 30%;
    height: 100%;
    float: left;
    background-color: royalblue;
    border-collapse: collapse;
}

.rightpane {
  width: 37%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

</style>

</div>

</html>

我现在有这个：

然后我尝试将其添加到左侧面板：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart

但它搞乱了整个网页结构：

＆＃13;

// Load google charts
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['TV', 4],
    ['Gym', 2],
    ['Sleep', 8]
  ]);

  // Optional; add a title and set the width and height of the chart
  var options = {
    'title': 'My Average Day',
    'width': 550,
    'height': 400
  };

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}

＆＃13;

body, html {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    
    .container {
      width: 100%;
      height: 100%;
    }
    
    .leftpane {
        width: 33%;
        height: 100%;
        float: left;
        background-color: rosybrown;
        border-collapse: collapse;
    	
    
    }
    
    .middlepane {
        width: 30%;
        height: 100%;
        float: left;
        background-color: royalblue;
        border-collapse: collapse;
    }
    
    .rightpane {
      width: 37%;
      height: 100%;
      position: relative;
      float: right;
      background-color: yellow;
      border-collapse: collapse;
    }

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div class="container">
  <div class="leftpane">
    <h1>Test Page</h1>
  </div>
  <div id="piechart"></div>
  <div class="middlepane">
    <h1>Test Page</h1>
    <b><p>This text is bold</p>
    <p>let's add more text</p>
    <p>bla bla bla</p></b>

    <button><input type="file" id="myFile"></button>
  </div>

  <div class="rightpane">
    <h1>Test Page</h1>
  </div>

＆＃13;

什么都没有修复它。有人可以指出我如何解决这个问题？我希望图表只是在左侧面板而不是它现在如何。 w ^

Answer 1

这是因为你的标记不正确：#piechart元素应该包含在.leftpane元素中，而不是它的兄弟。更改原始标记：

<div class="leftpane">
  <h1>Test Page</h1>
</div>

<!-- Element is outside of the pane! -->
<div id="piechart"></div>

......对此：

<div class="leftpane">
  <h1>Test Page</h1>

  <!-- Element is nested properly inside the pane! -->
  <div id="piechart"></div>
</div>

......会奏效。

注意：如果您希望Google图表具有响应性，而不是为其指定特定的宽度和高度，请允许它读取#piechart元素的尺寸。这也要求您在CSS中为元素指定一个特定的维度：

#piechart {
  width: 100%;
  height: 300px;
}

在你的JS中，设置窗口调整大小事件监听器来重绘图表：

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['TV', 4],
    ['Gym', 2],
    ['Sleep', 8]
  ]);

  // Optional; add a title and set the width and height of the chart
  var chartWrapper = document.getElementById('piechart');
  var options = {
    title: 'My Average Day',
    width: chartWrapper.offsetWidth,
    height: chartWrapper.offsetHeight
  };

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(chartWrapper);
  chart.draw(data, options);

  window.addEventListener('resize', function() {
    chart.draw(data, {
      width: chartWrapper.offsetWidth,
      height: chartWrapper.offsetHeight
    });
  });
}

见下面的概念验证：

// Load google charts
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['TV', 4],
    ['Gym', 2],
    ['Sleep', 8]
  ]);

  // Optional; add a title and set the width and height of the chart
  var chartWrapper = document.getElementById('piechart');
  var options = {
    title: 'My Average Day',
    width: chartWrapper.offsetWidth,
    height: chartWrapper.offsetHeight
  };

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(chartWrapper);
  chart.draw(data, options);
  
  window.addEventListener('resize', function() {
    chart.draw(data, {
      width: chartWrapper.offsetWidth,
      height: chartWrapper.offsetHeight
    });
  });
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
  width: 33%;
  height: 100%;
  float: left;
  background-color: rosybrown;
  border-collapse: collapse;
}

.middlepane {
  width: 30%;
  height: 100%;
  float: left;
  background-color: royalblue;
  border-collapse: collapse;
}

.rightpane {
  width: 37%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

#piechart {
  width: 100%;
  height: 300px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div class="container">
  <div class="leftpane">
    <h1>Test Page</h1>
    <div id="piechart"></div>
  </div>
  <div class="middlepane">
    <h1>Test Page</h1>
    <b><p>This text is bold</p>
    <p>let's add more text</p>
    <p>bla bla bla</p></b>

    <button><input type="file" id="myFile"></button>
  </div>

  <div class="rightpane">
    <h1>Test Page</h1>
  </div>

Answer 2

Try using this Code:

<html><head><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Eat', 2],
  ['TV', 4],
  ['Gym', 2],
  ['Sleep', 8]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'My Average Day', 'width':550, 'height':400};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/loader.js"></script>
<link id="load-css-0" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45.2/css/core/tooltip.css"><link id="load-css-1" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/45.2/css/util/util.css"><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_format_module.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_default_module.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_ui_module.js"></script><script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/45.2/js/jsapi_compiled_corechart_module.js"></script><style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{
    visibility: hidden !important;
}
</style></head><body><div class="container">
  <div class="leftpane">
    <h1>Test Page</h1>
<div id="piechart"><div style="position: relative;"><div dir="ltr" style="position: relative;"><div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="550" height="400" aria-label="A chart." style="overflow: hidden;"><defs id="defs"><filter id="_ABSTRACT_RENDERER_ID_0"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="1" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.1"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><rect x="0" y="0" stroke="none" stroke-width="0" fill="#ffffff" class=""></rect><g><text text-anchor="start" x="105" y="56.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">My Average Day</text><rect x="105" y="46" width="340" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><g><rect x="334" y="77" width="111" height="88" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g column-id="Work"><rect x="334" y="77" width="111" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="351" y="87.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text></g><circle cx="340" cy="83" r="6" stroke="none" stroke-width="0" fill="#3366cc"></circle></g><g column-id="Eat"><rect x="334" y="96" width="111" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="351" y="106.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Eat</text></g><circle cx="340" cy="102" r="6" stroke="none" stroke-width="0" fill="#dc3912"></circle></g><g column-id="TV"><rect x="334" y="115" width="111" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="351" y="125.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">TV</text></g><circle cx="340" cy="121" r="6" stroke="none" stroke-width="0" fill="#ff9900"></circle></g><g column-id="Gym"><rect x="334" y="134" width="111" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="351" y="144.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Gym</text></g><circle cx="340" cy="140" r="6" stroke="none" stroke-width="0" fill="#109618"></circle></g><g column-id="Sleep"><rect x="334" y="153" width="111" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="351" y="163.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Sleep</text></g><circle cx="340" cy="159" r="6" stroke="none" stroke-width="0" fill="#990099"></circle></g></g><g><path d="M210,201L210,96A105,105,0,0,1,300.93266739736606,253.5L210,201A0,0,0,0,0,210,201" stroke="#ffffff" stroke-width="1" fill="#3366cc"></path><text text-anchor="start" x="258.1414476000689" y="167.59056769269827" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">33.3%</text></g><g><path d="M210,201L300.93266739736606,253.5A105,105,0,0,1,262.5,291.93266739736606L210,201A0,0,0,0,0,210,201" stroke="#ffffff" stroke-width="1" fill="#dc3912"></path><text text-anchor="start" x="251.63916513789616" y="260.83916513789615" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">8.3%</text></g><g><path d="M210,201L119.06733260263394,253.5A105,105,0,0,1,210,96L210,201A0,0,0,0,0,210,201" stroke="#ffffff" stroke-width="1" fill="#990099"></path><text text-anchor="start" x="127.85855239993109" y="167.5905676926983" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">33.3%</text></g><g><path d="M210,201L157.50000000000003,291.93266739736606A105,105,0,0,1,119.06733260263391,253.49999999999994L210,201A0,0,0,0,0,210,201" stroke="#ffffff" stroke-width="1" fill="#109618"></path><text text-anchor="start" x="140.36083486210387" y="260.83916513789615" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">8.3%</text></g><g><path d="M210,201L262.5,291.93266739736606A105,105,0,0,1,157.50000000000003,291.93266739736606L210,201A0,0,0,0,0,210,201" stroke="#ffffff" stroke-width="1" fill="#ff9900"></path><text text-anchor="start" x="193.00000000000003" y="290.63303560529965" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">16.7%</text></g><g></g></svg><div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th>Task</th><th>Hours per Day</th></tr></thead><tbody><tr><td>Work</td><td>8</td></tr><tr><td>Eat</td><td>2</td></tr><tr><td>TV</td><td>4</td></tr><tr><td>Gym</td><td>2</td></tr><tr><td>Sleep</td><td>8</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 410px; left: 560px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">8 (33.3%)</div><div></div></div></div>
</div>

  <div class="middlepane">
    <h1>Test Page</h1>
    <b><p>This text is bold</p>
    <p>let's add more text</p>
    <p>bla bla bla</p></b>

<button><input type="file" id="myFile"></button>
</div>

  <div class="rightpane">
    <h1>Test Page</h1></div>


<style>
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;


}

.middlepane {
    width: 30%;
    height: 100%;
    float: left;
    background-color: royalblue;
    border-collapse: collapse;
}

.rightpane {
  width: 37%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

</style>

</div>

</body></html>

Answer 3

您还可以创建3个无边框滚动条的iFrame，彼此相邻，然后创建另外3个HTML文件，并在其中1个饼图上显示。

如何将屏幕分成3个面板并分别处理每个面板

3 个答案: