居中对齐 Google 仪表图

Question

我正在努力让 Google 仪表图居中对齐。

我想要一行居中的仪表字符和一行居中的折线图。

我尝试了各种选项并使用 "display: inline-block" 但没有用。带有折线图的行的行为符合预期。

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge', 'corechart']});
      google.charts.setOnLoadCallback(drawCharts);

      function drawCharts() {
        drawChart();
        drawGauges();
      }

      function drawGauges() {

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

        var w = $( window ).width();
        var x = Math.floor(w * 0.3);
        console.log("width: " + w + ", x = " + x);
        var h = $( window ).height();
        var y = Math.floor(h * 0.3)
        console.log("height: " + h + ", y = " + y);

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

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

        chart.draw(data, options);
      }

      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);
      }

    $(window).resize(function(){
        drawCharts();
    });
    </script>

    <style>
    .container {
            display: flex;
            flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }

    .row {
            height:30%;
        width: 100%;
    }

        #chart_div {
        display: inline-block
        margin: 0 auto;
    }
   </style>

  </head>
  <body>
    <div class="container">
        <div class="row">
            <div id="chart_div"></div>
        </div>
        <div class="row">
            <div id="curve_chart" ></div>
        </div>
    </div>
  </body>
</html>

Answer 1

将 text-align: center; 添加到 .container

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawCharts,
  packages:['corechart', 'gauge']
});

function drawCharts() {
  drawChart();
  drawGauges();
}

function drawGauges() {

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

  var w = $( window ).width();
  var x = Math.floor(w * 0.3);
  console.log("width: " + w + ", x = " + x);
  var h = $( window ).height();
  var y = Math.floor(h * 0.3)
  console.log("height: " + h + ", y = " + y);

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

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

  chart.draw(data, options);
}

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);
}

$(window).resize(function(){
    drawCharts();
});

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.row {
  height: 30%;
  width: 100%;
}

#chart_div {
  display: inline-block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
    <div class="row">
        <div id="chart_div"></div>
    </div>
    <div class="row">
        <div id="curve_chart" ></div>
    </div>
</div>

居中对齐 Google 仪表图

Center align Google Gauge Chart

css

charts

google-visualization

gauge

flexbox