调整谷歌折线图的位置

Question

我需要将谷歌折线图居中。

问题是，我不能使用align = "center"，因为它会导致我的工具提示悬停滞后，我不知道为什么。

我找到了一种在检查器中将图表居中的方法，方法是删除图表 div 深处的两个 div position: relative。

我想用

覆盖它

#electricalLineChart div div{
position: static!important 
} 

但即使使用!important，它也会忽略此代码

我在文档中没有找到任何关于定位的内容。我尝试使用legend 只是为了好玩，但它似乎没有做任何事情。 这是我的图表代码：

// line chart
        var linechart1 = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'electricalLineChart',
            dataTable: joinedData,
            options: {
                colors: ['#4DC3FA', '#185875'],
                animation: {
                    duration: 1000,
                    easing: 'out',
                },
                width: 800,
                height: 500,
                legend: { position: 'static'},
                title: 'Line Chart',
                explorer: {},
                hAxis: {
                    title: 'Month'
                },
                vAxis: {
                    format: formatPattern
                    //title: 'Amount Billed ($), Consumption (kWh)',

                }
            },
        });

相关 HTML：

<div style="overflow-x:auto;">
                    <table class="container">
                        <tbody id="electrical-tables">
                            <tr id="odd-cells">
                                <td>
                                    <div id="electricalLineChart"></div>
                                </td>
                            </tr>
                                .... other rows removed for clarity
                          </tbody>
                       </table>
        </div>

相关 CSS：

#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;

}

基本上，图像中带有dir= "ltr" 的第三个div 必须是position: static 而不是position: relative。

Answer 1

问题，<div> 元素是块元素，这意味着它们扩展了其父元素的总宽度。

即使图表没有占据整个宽度，
<div> 仍扩展为父级的宽度。

为防止这种行为，请将以下 css 添加到 <div>,
这将允许它居中......

display: inline-block;

例如

#electricalLineChart, #Request_line_chart1{
  width: 80%;
  margin: auto;
  display: inline-block;
}