Question

我正试图将我的谷歌图表中心对齐，但这样做并未成功。我玩过填充物将它移动到中心，但我不想坐在那里和火虫一起玩很长时间并找出正确的位置。是否有更简单的方法，例如对齐文本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

Answer 1

提供chart_div：display: block和margin: 0 auto;

Answer 2

你也可以做<div id='chart_div' align='center'>这对我有用，虽然现在我的图表悬停功能无效。其他人都遇到这个问题？我在谈论当你将鼠标悬停在图表上的某个点上时。它通常显示Jan Sales 440等点。任何人都知道修复？

Answer 3

我一直面临与谷歌规格相同的问题。检查生成的代码我意识到<div id='chart_div'>中的下一个内容是一个边距为0的表格。

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

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

这很有效。

Answer 4

接受的答案被打破了;你必须使用 display：inline-block 来对齐你的图表。

Answer 5

由于width已修复，请尝试将margin-left和margin-right设置为auto。应该假设该位置是相对的。

Answer 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使用相同的宽度。

Answer 7

将 chart_div 设置为以下属性：

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

Answer 8

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

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

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

Answer 9

我在这里结合了一些答案，如下：

创建一个css类：

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

并将以下内容添加到我的table.draw（）调用：

，将其添加到表格的单元格中

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

我是谷歌排行榜的新手，但对我而言，关键是添加！对文本对齐样式很重要（感谢thanassis）。对于我的情况，我需要边框样式，因为重写tableCell样式，否则。此外，我更喜欢定义类并让图表api应用它而不是覆盖api生成的样式。

Answer 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';
  }

Answer 11

以下代码对我有用：

width:fit-content;
margin:0 auto;

Answer 12

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

HTML

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

CSS

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

中心对齐Google图表

12 个答案: