我试图将网页拆分为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>
更多推荐
发布评论