并排放置而不是垂直放置的图表
[英] Side by side placement instead of vertically placed charts
本文介绍了并排放置而不是垂直放置的图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想并排放置图表，但它们被呈现在另一个下方.请建议如何做到这一点.我不想为此使用仪表板面板.
我们是否可以通过调整 HTML 标签等来实现它，以便可以使用屏幕中的水平位置而减少垂直滚动.
HTML 代码
<头><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load('可视化', '1');google.setOnLoadCallback(drawVisualization);//条形图代码函数 drawVisualization() {var columnChart = new google.visualization.ChartWrapper({chartType: 'ColumnChart',dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwbYufmDPjvOT/edit#gid=0',//查询:'select * where `当前值`<15000',选项: {'title': 'Kaushik 个人资料',图例:{位置:'顶部'}},视图:{列":[0,1,2]}，容器 ID:'col_chart'});columnChart.draw()//投资饼图代码varinvestedpieChart = new google.visualization.ChartWrapper({chartType: '饼图',dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAYwVgPvOT1q2P-GQyzQ/edit#gid=0',选项: {'title': '投资金额', is3D: true},视图:{列":[0,1]}，containerId: 'investedpie_chart'});投资饼图.draw()//当前饼图的代码var currentpieChart = new google.visualization.ChartWrapper({chartType: '饼图',dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAufmDPjvOT1q2P-GQyzQ/edit#gid=0',选项: {'title': '投资金额', is3D: true},视图:{列":[0,2]}，containerId: 'currentpie_chart'});当前饼图.draw()//不需要查询回调处理程序！}<body style="font-family: Arial;border: 0 none;"><div><div id="col_chart" style="width: 500px; height: 600px;">
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div><div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</html>
解决方案
这是一个 HTML 样式问题.HTML 元素是显示在新行还是同一行取决于一些不同的事情.如果宽度不足以并排显示两个元素，则第二个元素将换行到下一行.基本上有两个问题:
- 父元素的宽度是否足以并排显示子元素
- 是样式设置，设置为内联或阻止.
这是有问题的 HTML:
<div id="col_chart" style="width: 500px; height: 600px;">
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div><div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
如果设置父 DIV 的宽度会怎样?
<div id="col_chart" style="width: 500px; height: 600px;">
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div><div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
在某些情况下，使用 float: left 或 float: right 或两者的某种组合都可以工作.
您还可以研究现有的 StackOverflow 问题，例如:
并排对齐元素
HTML 中的并排元素
I would like to place the charts side by side but they are being rendered one below another . Please suggest how to do this. I don't want to use a Dashboard panel for it.
Can we achieve it by tweaking the HTML tags etc. so that the horizontal place in the screen can be used and less of scrolling vertically .
HTML Code
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1');
google.setOnLoadCallback(drawVisualization);
// Code for Bar chart
function drawVisualization() {
var columnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwbYufmDPjvOT
/edit#gid=0',
//query: 'select * where `Current Value`< 15000',
options: {
'title': 'Kaushik Profile',
legend: { position: 'top' }
},
view:{"columns": [0,1,2]},
containerId: 'col_chart'
});
columnChart.draw()
// Code for Invested pie chart
var investedpieChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAYwVgPvOT1q2P-GQyzQ/edit#gid=0',
options: {
'title': 'Invested Amount', is3D: true},
view:{"columns": [0,1]},
containerId: 'investedpie_chart'
});
investedpieChart.draw()
// Code for Current pie chart
var currentpieChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAufmDPjvOT1q2P-GQyzQ/edit#gid=0',
options: {
'title': 'Invested Amount', is3D: true},
view:{"columns": [0,2]},
containerId: 'currentpie_chart'
});
currentpieChart.draw()
// No query callback handler needed!
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div>
<div id="col_chart" style="width: 500px; height: 600px;"> </div>
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
<div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</div>
</body>
</html>
解决方案
This is a HTML Styling question. Whether HTML elements are displayed on a new line, or on the same line depend on a few different things. If the width is not sufficient to display two elements side by side, the second element will be wrapped to the next line. Basically there are two issues:
- Is the width of the Parent Element wide enough to display the children side by side
- Is the style setting, set to Inline or Block.
This is the HTML in question:
<div>
<div id="col_chart" style="width: 500px; height: 600px;"> </div>
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
<div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</div>
What happens if you set the width of the parent DIV?
<div style="width: 2000px;">
<div id="col_chart" style="width: 500px; height: 600px;"> </div>
<div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
<div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</div>
In some situations, using float: left or float: right can work or some combination of the two.
You can also research existing StackOverflow questions like these:
Align Elements Side by Side
Elements Side by Side in HTML
这篇关于并排放置而不是垂直放置的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
