Question

我想将图表并排放置，但它们正在一个低于另一个。请建议如何做到这一点。我不想使用仪表板面板。

我们可以通过调整HTML标签等来实现它，这样就可以使用屏幕中的水平位置而不是垂直滚动。

HTML代码

<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>

Answer 1

这是一个HTML样式问题。 HTML元素是在新行上显示还是在同一行上显示取决于几个不同的东西。如果宽度不足以并排显示两个元素，则第二个元素将被包裹到下一行。基本上有两个问题：

父元素的宽度是否足够宽以并排显示子元素
是样式设置，设置为内联或阻止。

这是有问题的HTML：

<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>

如果设置父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>

在某些情况下，使用float: left或float: right可以使用，也可以将两者结合使用。

您还可以研究现有的StackOverflow问题：

Align Elements Side by Side

Elements Side by Side in HTML

Answer 2

这对我有用：

<body>
 <table>
    <tr>
        <td><div id="chart_div" style="width: 300px; height: 300px;"></div></td>
        <td><div id="chart2_div" style="width: 300px; height: 300px;"></div></td>
    </tr>
 <table>

并排放置而不是垂直放置的图表

2 个答案: