Question

通常情况下，漂浮适合我，我可以向左或向右漂浮。但是，这次我正在使用Google Charts，此代码使用getElementByID。然后每个div ID包含图表的图像。我的目标是将两个图表彼此相邻放置，但最终发生的事情是，应该在左侧的图表就会消失。

到目前为止，我尝试在样式和类中使用float来实现div。似乎都没有奏效。我不确定我是否正确地做了，但是我之前在其他文档中已经开始工作了，所以我假设我需要在这种情况下使用不同的方法。

如果需要，我可以粘贴代码。当两个ID都包含Google Chart时，将两个div放在一起的解决方案是什么？

编辑：这是我的代码http://pastebin.com/frhhEDYt

的粘贴

Answer 1

尝试将包含两个图表的父容器放入其中，在 JS 和 CSS 中指定每个图表的width和height ，将每个图表设置为block（以确保跨浏览器），float，清除下一行。不要忘记为容器设置足够的指定width以包含图表。如果 100％，它将遵循窗口的/父宽度，或者如果该值总体上低于图表的宽度，则一个图表将低于。

以下是我的傻瓜：http://jsfiddle.net/JSwth/

希望它有所帮助。

Answer 2

如果花车不起作用，也许可以用桌子摆好桌子，开始吧？这至少可以确保导致第二张图表消失的风格，而不是Google Charts API。

这个帖子也可以提供帮助（这可以直接使用两个图表来解决Google Charts的使用问题）：How to add two Google charts on the one page?

Answer 3

#chart_div{
  width:250px;
  float:left;
}  
#chart_div2{
  width:250px;
  float:left;
} 

<script type="text/javascript" src="https://www.google.com/jsapi">
</script>

<div id="chart_div">
</div>
<div id="chart_div2">
</div>
<div id="chart_div3">
</div>

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
    'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ]);
    // Create the data table.
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Topping');
    data2.addColumn('number', 'Slices');
    data2.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 15],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ]);

    var data3 = new google.visualization.DataTable();
    data3.addColumn('string', 'Year');
    data3.addColumn('number', 'Sales');
    data3.addColumn('number', 'Expenses');
    data3.addRows([
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 860, 580],
        ['2007', 1030, 540]
    ]);

    // Set chart options
    var options = {
        'title': 'How Much Pizza I Ate Last Night',
        'width': 250,
        'height': 200
    };
    // Set chart options
    var options2 = {
        'title': 'How Much Pizza You Ate Last Night',
        'width': 250,
        'height': 200
    };
    // Set chart options
    var options3 = {
        'title': 'Line chart',
        'width': 250,
        'height': 200
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
    chart2.draw(data2, options2);
    var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
    chart3.draw(data3, options3);

}

我为您创建了一个垃圾箱，请使用此链接进行检查 http://codebins.com/codes/home/4ldqpc5

两个Div彼此相邻，其中ID包含图像

3 个答案: