google折线图调整位置

Question

我需要将 google 折线图居中。

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

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

我想用

覆盖它

#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;
}

google折线图调整位置

Adjusting position of google linechart

html

css

center

linechart

google-visualization