居中对齐 Google 图表答案

【问题标题】：Center Aligning the Google charts居中对齐 Google 图表
【发布时间】：2021-02-15 13:57:01
【问题描述】：

我正在尝试将我的谷歌图表居中对齐，但没有成功。我玩过填充物将其移动到中心，但我不想坐在那里长时间玩萤火虫并找出正确的位置。有没有更简单的比如对齐文本text-align: center。显然它不适用于谷歌图表。（我对这一切都不熟悉）

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

...some code ...

    <div id='chart_div' style='width: 900px; height: 400px;'></div>

虽然我这样做了padding-left: 140px，但有没有更好的方法像align: center

【问题讨论】：

标签： html css positioning google-visualization

【解决方案1】：

给chart_div：display: block和margin: 0 auto;

【讨论】：

我不得不使用display: inline-block，因为图表 div 呈现全宽。

【解决方案2】：

你也可以<div id='chart_div' align='center'> 这对我有用，虽然现在我的图表悬停功能不起作用。还有人遇到这个问题吗？我说的是当您将鼠标悬停在图表上的某个点上时。它通常显示诸如 Jan Sales 440 之类的点。有人知道修复方法吗？

【讨论】：

如果您不关心悬停功能，这是一个非常容易使用的答案。

【解决方案3】：

我在使用谷歌仪表时遇到了同样的问题。检查生成的代码，我意识到<div id='chart_div'> 中的下一个内容是一个将边距设置为内联样式的表格。

所以为了覆盖它，我使用了以下 css：

div.chart_div table {
    width: auto;
    margin: 0 auto !important;
}

这奏效了。

【讨论】：

【解决方案4】：

已接受的答案已损坏；你必须使用 display: inline-block 来居中对齐你的图表。

【讨论】：

似乎是对另一个帖子的回应——而不是一个答案。

【解决方案5】：

由于width 是固定的，请尝试将margin-left 和margin-right 设置为auto。假设位置是相对的，它应该可以工作。

【讨论】：

【解决方案6】：

这些答案中的任何一个都不适合我，所以我这样做了：

<div class="chart_box">
  <div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>

.chart_box {
  width: 900px;
  margin: 0 auto;
}

chart_div 和 chart_box 需要使用相同的宽度。

【讨论】：

【解决方案7】：

将 chart_div 设置为以下属性：

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

【讨论】：

【解决方案8】：

注意：当您移除侧边菜单（“legend: 'none'”）时，宽度应该会改变。

这主要发生在您使用“legend: 'none'”时，因为它留下了用于容纳该菜单的侧面空间，而不是自动调整宽度。您需要重新设置宽度并缩小它，以操纵其对齐方式：

var options = {
          title: 'center alignment',
          width:  350, 
          height: 350,
          legend: 'none'
        };

【讨论】：

【解决方案9】：

我这里结合了几个答案，如下：

创建一个css类：

.customChartStyle{
    border:1px solid #eee;
    text-align:center !important;
}

并通过将以下内容添加到我的 table.draw() 调用中，将其添加到表格的单元格中：

'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}

我是谷歌图表的新手，但对我来说关键是添加 !important 到文本对齐样式（感谢thanassis）。对于我的情况，我需要边框样式，因为覆盖 tableCell 样式会删除它。此外，我更喜欢定义类并让图表 api 应用它，而不是覆盖 api 生成的样式。

【讨论】：

【解决方案10】：

订阅ready 事件以使用 JavaScript 修改 CSS。像下面这样的东西可以解决问题。

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

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

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

  var guage = new google.visualization.Gauge(document.getElementById('my-div'));

  // HERE'S HOW TO SUBSCRIBE TO THE EVENT
  google.visualization.events.addListener(guage, 'ready', resetTableStyle);

  guage.draw(data, guageOptions);

  // HERE'S THE JAVASCRIPT TO SET YOUR CSS
  // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
  function resetTableStyle(){
    var myDiv = document.getElementById('my-div');
    var myTable = myDiv.getElementsByTagName('table')[0];
    myTable.style.margin = 'auto';
  }

【讨论】：

【解决方案11】：

以下代码对我有用：

width:fit-content;
margin:0 auto;

【讨论】：

【解决方案12】：

通过为我的 div 实现一个类，它现在可以居中。

HTML

<div id="chart_div2" class="chart_hum"></div>

CSS

.chart_hum {
    margin: 0 auto;
    display: inline-block;
}

【讨论】：