Блог

Главная - Вопросы по программированию - Как переместить аннотацию диаграммы Google вверху или в любом месте с помощью CSS?

Как переместить аннотацию диаграммы Google вверху или в любом месте с помощью CSS?

#javascript #html #css #charts #google-visualization

#javascript #HTML #css #Диаграммы #google-визуализация

Вопрос:

Я хотел бы переместить аннотацию в нижнюю или верхнюю часть Google Chart API, как показано на рисунке ниже. Я пробовал с magin-bottom: 50px , padding-bottom: 50px или bottom: 50px , но у меня это не сработало.

Рис

HTML:

 <div id="chart_div" style="width: 900px; height: 500px;"></div>

Javascript:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Комментарии:

1. Можете ли вы заставить эту скрипку работать?

2. @ImranBughio: Это не работает. Что с этим не так? Пожалуйста, нажмите Выполнить перед сохранением!

3. @ImranBughio: Теперь это работает с jsfiddle.net/AW5UR/1

Ответ №1:

У вас есть возможность переместить внизу, используя ключевое слово «легенда».

Обновите часть параметров, как показано ниже.

 var options = {
  legend: 'bottom',
  title: 'Company Performance'
};

Демонстрация СКРИПКИ

Комментарии:

1. Это здорово. Это хорошо работает с legend: 'top' и legend: 'bottom' . Большое вам спасибо.