Регулировка положения линейки Google - PullRequest
Новая
       17

Регулировка положения линейки Google

0 голосов
/ 14 января 2019

Мне нужно отцентрировать график линии Google.

Проблема в том, что я не могу использовать align = "center", потому что из-за этого моя подсказка отстает, я не знаю почему.

Я нашел способ центрировать диаграмму в инспекторе, удалив position: relative на два деления глубоко в моем делении диаграммы.

enter image description here

Я думал переопределить это с 

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

RELEVENT CSS: 

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

}

По сути, третий делитель вниз на изображении с dir= "ltr" должен быть position: static, а не position: relative.

1 Ответ

0 голосов
/ 15 января 2019

проблема, <div> элементы являются блочными элементами, что означает, что они расширяют общую ширину своего родительского элемента.

, хотя диаграмма не занимает всю ширину,
<div> все еще расширяется до ширины родителя.

, чтобы предотвратить это поведение, добавьте следующий CSS к <div>,
что позволит центрировать его ... 

display: inline-block;

, например 

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