14

我正在尝试将我的谷歌图表居中对齐，但没有成功。我玩过填充物将其移动到中心，但我不想坐在那里长时间玩萤火虫并找出正确的位置。有没有更简单的比如对齐文本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

4

12 回答 12

21

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

于 2012-06-12T23:08:16.167 回答
10

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

于 2012-10-24T19:32:06.570 回答
7

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

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

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

这奏效了。

于 2012-10-12T12:33:34.733 回答
7

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

于 2015-08-23T23:46:41.350 回答
2

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

于 2012-06-12T23:08:19.273 回答
2

这些答案中的任何一个都对我不起作用，所以我这样做了：

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

于 2018-02-13T16:28:42.277 回答
1

将chart_div设置为以下属性：

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

于 2019-03-27T00:49:58.500 回答
1

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

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

var options = {
          title: 'center alignment',
          width:  350, 
          height: 350,
          legend: 'none'
        };
于 2021-02-15T05:57:01.637 回答
0

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

创建一个 CSS 类：

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

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

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

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

于 2013-04-19T14:48:37.243 回答
0

订阅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';
  }
于 2017-01-03T22:01:10.583 回答
0

下面的代码对我有用：

width:fit-content;
margin:0 auto;
于 2020-10-22T05:26:05.050 回答
0

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

HTML

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

CSS

.chart_hum {
    margin: 0 auto;
    display: inline-block;
}
于 2020-10-23T09:10:14.723 回答