中心對齊Google量表圖表

我很努力讓Google量表圖表居中對齊。中心對齊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>

來源

2017-03-21 jchris

可以使一個小提琴？ –

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

來源

2017-03-21 13:04:50 WhiteHat

是的，它的工作。非常感謝。很簡單，但我沒有找到它自己。 – jchris

中心對齊Google量表圖表

回答

相關問題