Question

我需要居中放置Google折线图。

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

我找到了一种方法，可以通过删除图表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"的第三格需要为position: static而非position: relative。

Answer 1

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

即使图表未占用整个宽度，
<div>仍会扩展到父级的宽度。

为防止此行为，请在<div>中添加以下CSS，
这将使它居中...

display: inline-block;

例如

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

调整Google线图的位置

1 个答案: