0

通常，浮动对我有用，我可以向左或向右浮动。但是，这一次我正在使用 Google Charts，并且此代码使用 getElementByID。然后每个 div ID 包含一个图表的图像。我的目标是将两张图表并排放置，但最终发生的情况是，应该在左侧的图表消失了。

到目前为止，我已经尝试在 div 的样式和类中使用浮点数。两者似乎都不起作用。我不确定我是否做得正确，但是我之前在其他文档中已经浮动工作了，所以我假设我需要针对这种情况使用不同的方法。

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

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

4

3 回答 3

3

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

这是我的 jsfiddle：http: //jsfiddle.net/JSwth/

希望能帮助到你。

于 2012-07-03T07:35:03.000 回答
0

如果花车不工作，也许先用一张桌子把它们摆好？这至少可以确保它是导致第二个图表消失的样式，而不是 Google Charts API。

该线程也可能有所帮助（这直接解决了使用两个图表的 Google 图表使用情况）：如何在一个页面上添加两个 Google 图表？

于 2012-07-03T04:10:22.400 回答
0 
#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检查

于 2012-07-03T05:28:44.873 回答