Блог

Главная - Вопросы по программированию - как свернуть область заголовка в диаграмме Google

как свернуть область заголовка в диаграмме Google

#google-visualization

Вопрос:

Посмотрите на эту простую диаграмму Google. Я хотел бы избавиться от ненужного отступа между тегом hr и верхней частью графика. (Я предполагаю, что это для названия, но я не использую названия.)

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
        titleTextStyle : {
            fontSize:1
        },
          title: null,
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      } 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>

Редактировать

Я принял ответ вахаба мемо, потому что он непосредственно касается моего первоначального вопроса. Однако решение моей первоначальной проблемы вводит — или вместо этого раскрывает — другую проблему вертикального расстояния внизу. Посмотрите на этот очень высокий график (высокий график имеет смысл, например. для гистограмм со многими независимыми значениями). «Расстояние» вверх и вниз до заголовка горизонтальной оси излишне велико:

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
  ]);

  var options = {
    chartArea: {
      width: '80%',
      height: '80%',
      top: 10
    },
    title: null,
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
} 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>

Должен быть способ указать Диаграммам, как применять эти правила:

  • не используйте заголовок вообще (также опустите пробел)
  • используйте нормальную маркировку по горизонтальной оси внизу (с собственным размером этикетки).
  • используйте все оставшееся пространство для самого графика.

Интересно, возможно ли это каким-либо образом.

Ответ №1:

Вы можете предоставить chartArea конфигурацию, в options которой учитывается высота и ширина диаграммы. Используя это, дополнительный интервал будет использоваться вашим представлением диаграммы. Обратитесь к приведенному ниже коду или к скрипке:

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
  ]);

  var options = {
    titleTextStyle: {
      fontSize: 1
    },
    chartArea: {
      width: '80%',
      height: '80%',
      top: 10
    },
    title: null,
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
} 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
Метки: