Adjusting position of google linechart

问题: I need to center a google line chart. The problem is, I cannot use align = "center" because it causes my tooltip hover to lag behind, I'm not sure why. I found a way t...

问题:

I need to center a google line chart.

The problem is, I cannot use align = "center" because it causes my tooltip hover to lag behind, I'm not sure why.

I found a way to center the chart in the inspector by removing position: relative two divs deep in my chart div.

enter image description here

I thought to override this with

#electricalLineChart div div{
position: static!important 
} 

But it ignores this code even with !important

I haven't found anything in the documentation that addresses positioning. I tried using legend just for kicks but it doesn't seem to do anything. Here is my chart code:

// 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)',

                }
            },
        });

RELEVENT 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>

RELEVENT CSS:

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

}

Essentially, the third div down in the image with dir= "ltr" needs to be position: static not position: relative.


回答1:

the problem, <div> elements are block elements, which means they expand the total width of their parent element.

even though the chart does not take up the entire width,
the <div> still expands to the width of the parent.

to prevent this behavior, add the following css to the <div>,
which will allow it to be centered...

display: inline-block;

e.g.

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

回答2:

I actually solved it by:

#electricalLineChart, #Request_line_chart1{
display: flex;
justify-content: center;

}
  • 发表于 2019-01-17 07:12
  • 阅读 ( 178 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除