Центр Выравнивание диаграмм Google

Я пытаюсь центрировать выравнивание диаграммы Google, но не удалось сделать это. Я играл с дополнением, чтобы переместить его в центр, но я не хочу сидеть там и играть с firebug в течение длительного времени и выяснить правильную позицию. Есть ли более простые, такие как выравнивание текста 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

Ответы

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

Принятый ответ нарушен; вы должны использовать display: inline-block to center выровнять диаграмму.

Ответ 4

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

Ответ 5

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

Ответ 6

Здесь я собрал несколько ответов, а именно:

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

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

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

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

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

Ответ 7

Подпишитесь на 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';
  }

Ответ 8

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

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