Html 居中对齐 Google 图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11006096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center Aligning the Google charts
提问by SherCoder
I am trying to center align my google chart but have been unsuccessful in doing so. I have played with padding to move it to the center but I don't want to sit there and play with firebug for long time and figure out the correct position. Is there any simpler such as aligning text text-align: center. Obviously it doesn't work with google charts. (I am new to all of this)
我试图将我的谷歌图表居中对齐，但没有成功。我已经使用填充将其移动到中心，但我不想坐在那里长时间玩萤火虫并找出正确的位置。有没有更简单的，比如对齐文本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>
although I did this padding-left: 140pxbut is there any better way like align: center
虽然我这样做了padding-left: 140px但是有没有更好的方法align: center
回答by Robert Niestroj
Give the chart_div: display: blockand margin: 0 auto;
给chart_div： display: block和margin: 0 auto;
回答by user1504583
You could also do <div id='chart_div' align='center'>This worked for me, although now my chart hovering function isn't working. Anyone else get this problem? I'm talking about when you hover the mouse over a point on the graph. It usually shows the point such as Jan Sales 440. Anyone know of a fix?
你也可以这样做<div id='chart_div' align='center'>这对我有用，虽然现在我的图表悬停功能不起作用。还有其他人遇到这个问题吗？我说的是当你将鼠标悬停在图表上的一个点上时。它通常显示诸如 Jan Sales 440 之类的点。有人知道修复方法吗？
回答by Mich. Gio.
The accepted answer is broken; you have to use display: inline-blockto center align your chart.
已接受的答案已损坏；您必须使用display: inline-block将图表居中对齐。
回答by thanassis
I have been facing the same issue with a google gauge. Checking the code generated I realized that the next thing inside the <div id='chart_div'>is a table with margin 0 set as inline style.
我一直在使用谷歌仪表面临同样的问题。检查生成的代码，我意识到里面的下一件事情<div id='chart_div'>是一个边距 0 设置为内联样式的表格。
So in order to override it I used the following css:
因此，为了覆盖它，我使用了以下 css：
div.chart_div table {
width: auto;
margin: 0 auto !important;
}
And this worked.
这奏效了。
回答by Mimoid
Any of these answers doesn't work for me so i did that:
这些答案中的任何一个对我都不起作用，所以我这样做了：
<div class="chart_box">
<div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>
.chart_box {
width: 900px;
margin: 0 auto;
}
You need to use same width for chart_div and chart_box.
您需要为chart_div 和chart_box 使用相同的宽度。
回答by Pardesi_Desi
Set chart_divto following properties:
将chart_div设置为以下属性：
#chart_div{
display: inline-block;
margin: 0 auto;
}回答by Soufiane Hassou
Since widthis fixed, try setting margin-leftand margin-rightto auto. It should work assuming that the position is relative.
由于width是固定的，尝试设置margin-left和margin-right到auto。假设位置是相对的，它应该可以工作。
回答by Ronnie Royston
Subscribe to the readyevent to modify the CSS with JavaScript. Something like below will do the trick.
订阅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';
}
回答by nvioli
I combined a few of the answers here, as follows:
我在这里结合了一些答案，如下：
Create a css class:
创建一个 css 类：
.customChartStyle{
border:1px solid #eee;
text-align:center !important;
}
and add it to the table's cells by adding the following to my table.draw() call:
并通过将以下内容添加到我的 table.draw() 调用中，将其添加到表格的单元格中：
'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}
I'm new to google charts but the key for me was adding !important to the text-align style (thanks thanassis). For my case I needed the border style because overriding the tableCell style removed that otherwise. Also I prefer defining the class and letting the charts api apply it instead of overriding the styles generated by the api.
我是谷歌图表的新手，但对我来说关键是添加 !important 到文本对齐样式（感谢thanassis）。对于我的情况，我需要边框样式，因为覆盖 tableCell 样式会删除它。此外，我更喜欢定义类并让图表 api 应用它，而不是覆盖由 api 生成的样式。
