it-roy-ru.com

Центр выравнивания карт Google

Я пытаюсь выровнять свою диаграмму Google по центру, но мне это не удалось. Я играл с отступами, чтобы переместить его в центр, но я не хочу сидеть там и долго играть с клопом и выяснить правильную позицию. Есть ли что-нибудь попроще, например, выравнивание текста text-align: center. Очевидно, это не работает с Google-чартами. (Я новичок во всем этом)

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

...some code ...

    <div id='chart_div' style='width: 900px; height: 400px;'></div>             

хотя я сделал это padding-left: 140px, но есть ли лучший способ, как align: center 

11
SherCoder

Дайте chart_div: display: block и margin: 0 auto;

15
Robert Niestroj

Вы также можете сделать <div id='chart_div' align='center'> Это сработало для меня, хотя теперь моя функция зависания графика не работает. Кто-нибудь еще получил эту проблему? Я говорю о том, когда вы наводите курсор мыши на точку на графике. Это обычно показывает точку, такую ​​как Ян продаж 440. Кто-нибудь знает исправление?

7
user1504583

Я столкнулся с той же проблемой с датчиком Google. Проверяя сгенерированный код, я понял, что следующая вещь внутри <div id='chart_div'> - это таблица с полем 0, установленным как встроенный стиль.

Таким образом, чтобы переопределить это, я использовал следующий CSS:

div.chart_div table {
    width: auto;
    margin: 0 auto !important;
}

И это сработало.

6
thanassis

Принятый ответ нарушен; Вы должны использовать display: inline-block , чтобы выровнять график по центру.

6
Mich. Gio.

Поскольку width исправлен, попробуйте установить margin-left и margin-right в auto. Это должно работать, предполагая, что положение относительно.

1
Soufiane Hassou

Любой из этих ответов не работает для меня, поэтому я сделал это:

<div class="chart_box">
  <div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>

.chart_box {
  width: 900px;
  margin: 0 auto;
}

Вам нужно использовать одинаковую ширину для chart_div и chart_box.

0
Mimoid

Подпишитесь на событие ready, чтобы изменить CSS с помощью JavaScript. Нечто подобное ниже поможет.

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var guageOptions = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

  var guage = new google.visualization.Gauge(document.getElementById('my-div'));

  // HERE'S HOW TO SUBSCRIBE TO THE EVENT
  google.visualization.events.addListener(guage, 'ready', resetTableStyle);

  guage.draw(data, guageOptions);

  // HERE'S THE JAVASCRIPT TO SET YOUR CSS
  // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
  function resetTableStyle(){
    var myDiv = document.getElementById('my-div');
    var myTable = myDiv.getElementsByTagName('table')[0];
    myTable.style.margin = 'auto';
  }
0
Ron Royston

Я объединил несколько ответов здесь следующим образом:

Создайте класс CSS:

.customChartStyle{
    border:1px solid #eee;
    text-align:center !important;
}

и добавьте его в ячейки таблицы, добавив следующее в мой вызов table.draw ():

'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}

Я новичок в гугл-чартах, но ключом для меня было добавление! Важно к стилю выравнивания текста (спасибо thanassis). Для моего случая мне понадобился стиль границы, потому что переопределение стиля tableCell удалило это в противном случае. Также я предпочитаю определить класс и позволить API-интерфейсу диаграмм применять его вместо переопределения стилей, сгенерированных API-интерфейсом.

0
nvioli