0

通常、フロートは私のために機能します、そこで私はちょうど左または右にフロートすることができます。ただし、今回はGoogle Chartsを使用しており、このコードはgetElementByIDを使用しています。次に、各divIDにグラフの画像が含まれます。私の目標は2つのチャートを並べて配置することですが、最終的には左側にあるはずのチャートが消えてしまいます。

これまで、divのスタイルとクラスでfloatを使用してみました。どちらも機能していないようです。正しく行っているかどうかはわかりませんが、他のドキュメントで以前にフロートが機能するようになっているので、この状況では別のアプローチを使用する必要があると想定します。

必要に応じてコードを貼り付けることができます。両方のIDにGoogleChartが含まれている場合に、2つのdivを並べて配置するための解決策は何ですか？

編集：これが私のコードの貼り付けですhttp://pastebin.com/frhhEDYt

4

3 に答える 3

3

2 つのグラフを含む親コンテナーを配置し、各グラフの と をJSとCSSの両方で指定しwidth、各グラフを(クロス ブラウザーを確実にするために)として設定し、次の行をクリアします。チャートを収めるのに十分なコンテナの指定を忘れずに設定してください。100%の場合、ウィンドウ/親の幅に従います。または、値が合計チャートの幅よりも小さい場合、1 つのチャートが下に落ちます。heightblockfloatwidth

これが私のjsfiddleです：http://jsfiddle.net/JSwth/

それが役に立てば幸い。

于 2012-07-03T07:35:03.000 に答える
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 に答える
0

フロートが機能しない場合は、テーブルに配置してみてください。これにより、Google Charts API ではなく、2 番目のグラフが消える原因となっているスタイルであることを少なくとも確認できます。

このスレッドも役立つかもしれません (これは 2 つのチャートでの Google チャートの使用法に直接対処しています): How to add two Google charts on the one page?

于 2012-07-03T04:10:22.400 に答える