修改

Question

我对HTML一无所知。所以我必须为动态项目生成这个。我需要本论坛专家的帮助。我需要在一个页面上放置来自谷歌的三个折线图和一个仪表图表，如何编写一个HTML代码，将屏幕分成4个季度以放置每个图表。这是其中一个折线图的html代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

这是测量图表html代码：

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55]

        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);


    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Answer 1

基本上，这是将屏幕分为四个部分的结构

.wrapper > div {
  position:absolute;
  width:50vw;
  height:50vh;
  overflow:hidden;
}

#chart1 {top:0;left:0;}
#chart2 {top:0;right:0;}
#chart3 {bottom:0;left:0;}
#chart4 {bottom:0;right:0;}

<div class="wrapper">
  <div id="chart1"></div>
  <div id="chart2"></div>
  <div id="chart3"></div>
  <div id="chart4"></div>
</div>

当然，一旦屏幕尺寸发生变化，您就必须刷新图表

以下是在线演示：https://jsfiddle.net/0cr5enak/

修改

好吧，要垂直堆叠，我只想将高度属性设置为每个div的1/4屏幕大小：https://jsfiddle.net/0cr5enak/2/

如何放置四个将屏幕分成四个并在每个部门放置一个谷歌图表（html）

1 个答案:

修改