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

Question

Normally, float works for me, where I can just float left or right. However, this time I am working with Google Charts and this code uses getElementByID. Then each div ID contains an image of a chart. My goal is to place two charts next to each other, but what ends up happening is that the chart that is supposed to be on the left side just disappears.

So far I have tried using float in style and class for div. Neither seems to be working. I am not sure if I am doing it correctly, however I have gotten float to work before in other documents, so I am going to assume I need to use a different approach for this situation.

I can paste code if needed. What is the solution for placing two divs next to each other when both IDs contain an Google Chart?

EDIT : Here is a paste of my code http://pastebin.com/frhhEDYt

Answer 1

Try putting a parent container with the two charts in it, specify the width and height of each charts both in JS and CSS , set each charts as block (to ensure cross browser as well), float them, clear the next rows. Don't forget to set a specified width for the container enough to encase the charts. If its 100% , it will follow the window's / parent width, or if the value is lower than the width of the charts in total, one chart will fall below.

Here's my jsfiddle for it: http://jsfiddle.net/JSwth/

Hope it helps.

Answer 2

Perhaps lay them out with a table, to start, if floats aren't working? That would at least make sure that it's the style causing the second chart to disappear, not Google Charts API.

This thread may help, too (this addresses Google Charts usage with two charts directly): 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);

}

I have created a bin for you please check using this link http://codebins.com/codes/home/4ldqpc5