有人知道如何将新的(即基于 svg 的)谷歌图表居中对齐吗?
当我在我的网页上检查图表元素时(请向下滚动到该页面上带有多个 Google 图表的 jQuery 选项卡),我看到图表本身被赋予了一个absolute
位置:
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; ">
<svg width="800" height="500" style="overflow: hidden; ">
我不确定谷歌为什么这样做,但它破坏了我的布局(除了图表对我很有效):
我的 CSS 代码:
h1,h2,h3,p,div,form {
text-align: center;
}
我也尝试在那里添加:
margin-left: auto;
margin-right: auto;
我的 JavaScript 代码:
var money_data;
var money_chart;
var money_options = {
width: 800,
height: 500,
legend: {position: 'top'},
areaOpacity: 1.0,
vAxis: {format: '# $'},
hAxis: {title: 'Номер недели', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}},
colors: ['CCFFCC', '66CC66', 'FF9999'],
animation: {duration: 1000, easing: 'out'}
};
function initMoney() {
$.ajax({
url: '/money-json.php',
data: { id: 'OK408547485023' },
dataType: 'json'
}).done(function(jsonData) {
money_data = new google.visualization.DataTable(jsonData);
money_chart = new google.visualization.SteppedAreaChart(document.getElementById('money_chart'));
google.visualization.events.addListener(money_chart, 'ready', function() {
$('#money_slider').slider('enable');
});
drawMoney();
});
}
function drawMoney() {
money_chart.draw(money_data, money_options);
}
如果这里没有基于 CSS 的解决方案,我是否可以使用 JavaScript 将 SVG 移动到与启用后者相同的位置(请参阅上面的代码)x
?money_slider