如何将屏幕分成3个面板并分别处理每个面板(how to split the screen into 3 panels and treat each panel separately)
我试图将网页拆分为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？文件名= showhow_google_pie_chart
但它弄乱了整个网页的结构：
// 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);
}
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;
}
<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>
没有什么是解决它。 有人能指出我该如何解决这个问题吗？ 我只想将图表放在左侧面板上，而不是现在的样子。 w ^
I'm trying to split a webpage into 3 parts and add different stuff to each of these 3 parts, so before I have this that makes sure the webpage is split into 3 parts:
<!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>
i have this now:
and then I'm trying to add this to the left panel:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart
but it's messing up the whole structure of the webpage:
// 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);
}
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;
}
<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>
nothing is fixing it. Can someone point out how i can fix that? I want the graph just to be on the left panel and not how it's now. W
最满意答案
这是因为你的标记是不正确的： #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>
That is because your markup is incorrect: the #piechart element should be wrapped within the .leftpane element, instead of being a sibling of it. Changing your original markup:
<div class="leftpane">
<h1>Test Page</h1>
</div>
<!-- Element is outside of the pane! -->
<div id="piechart"></div>
…to this:
<div class="leftpane">
<h1>Test Page</h1>
<!-- Element is nested properly inside the pane! -->
<div id="piechart"></div>
</div>
…will work.
Note: if you want your Google Chart to be responsive, instead of giving it a specific width and height, allow it to read the dimensions of the #piechart element. That also requires that you give the element a specific dimension in CSS:
#piechart {
width: 100%;
height: 300px;
}
And in your JS, set up the window resize event listener to redraw the chart:
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
});
});
}
See proof-of-concept below:
// 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>
更多推荐
发布评论