Google Chart не занимает 100% пространства - PullRequest
Новая
       31

Google Chart не занимает 100% пространства

2 голосов
/ 30 мая 2019

Во-первых, большой пример этого примера: https://www.c -sharpcorner.com / UploadFile / ca9151 / Google-карты-апи-с использованием базы данных, в-Asp-Net / Если вы хотите просто пройтись по созданию Google Chart, то это идеально.

Говоря, что ... как в этом примере, так и в моем проекте ... я не могу начать диаграмму слева от обозначенного раздела. он продолжает отступать. Хуже, когда я скрываю метки осей, поскольку пространство просто увеличивается из-за недостатка слов.

enter image description here

Кто-нибудь знает, как заставить их занимать 100% ширины? (на рисунке я хочу, чтобы график начинался с красной линии и проходил до другой стороны div)

Заранее спасибо.

1 Ответ

1 голос
/ 04 июня 2019

по умолчанию диаграмма не будет заполнять ширину и высоту контейнера.

используйте параметры chartArea, чтобы растянуть диаграмму до краев контейнера,
используйте top, left, bottom, right, чтобы оставить место для меток оси, заголовка и т. д. 

chartArea: {
  height: '100%',
  width: '100%',
  top: 48,
  left: 48,
  right: 16,
  bottom: 48
},
height: '100%',
width: '100%',

перерисовать диаграмму на «изменить размер», чтобы сделать его отзывчивым,
см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Average'],
    ['2019/01', 1, 2, 7, 3],
    ['2019/02', 5, 1, 3, 3.5],
    ['2019/03', 4, 3, 9, 6],
    ['2019/04', 1, 3, 8, 5],
    ['2019/05', 2, 6, 8, 4],
    ['2019/06', 3, 1, 9, 3],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 48,
      right: 16,
      bottom: 48
    },
    height: '100%',
    width: '100%',

    title : 'Monthly Coffee Production by Country',
    vAxis: {title: 'Cups'},
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {3: {type: 'area'}}
  };

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

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, options);
  }
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...