中心对齐Google图表

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

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

创建一个css类：

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

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

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

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

Answer 9

订阅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';
  }