отзывчивый график Google отображается только после первого изменения размера - PullRequest
Новая
       7

отзывчивый график Google отображается только после первого изменения размера

0 голосов
/ 19 мая 2018

У меня есть график Google, который не отображается после загрузки страницы.После первого изменения размера все работает.Как получить отображение диаграммы после загрузки страницы?

Данные поступают из текстового файла локали на сервере.Этот текстовый файл содержит дату / время и значение датчика.Текстовый файл разбивается и объединяется в качестве данных для диаграммы. 

 	google.load('visualization', '1.0', {'packages':['corechart']});
	google.setOnLoadCallback(drawChart);
	
	function drawChart () {
      $.ajax({
          url: 'Temp.ESP',
          type: 'get',
          success: function (txt) {
              var dataArray = [['Name', 'Date']];
              var txtArray = txt.split('\n');
              for (var i = 0; i < txtArray.length; i++) {
                  var tmpData = txtArray[i].split(/\s+/);
                  dataArray.push([tmpData[0], parseInt(tmpData[1])]);
              }
              var data = google.visualization.arrayToDataTable(dataArray);
              var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
              var options = {width: '100%',
							 height: '40%',
							 legend: 'none',
							 colors: ['red'],
							 hAxis: {
									textStyle:{color: 'white'}},
							vAxis: {
									textStyle:{color: 'white'}},
							 backgroundColor: { fill:'transparent' }};
              $(window).resize(function(){
				chart.draw(data,options);
			  });
          }
      });
	}

	google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
	
	setInterval(function(){ 
			$.get( "mydata.php", function( data ) {
				$( "#mydata" ).html( data ); // this will replace the html refreshing its content using ajax
			});
		}, 1000);
/* Chart */
	#chart{
		width: 100%; 
	}
<div id="chart">
    <div id="chart_div"></div>
</div>

спасибо!

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Я забыл вызвать функцию рисования.

Первый вызов был в функции изменения размера. 

function drawChart () {
      $.ajax({
          url: 'Temp.ESP',
          type: 'get',
          success: function (txt) {
              var dataArray = [['Name', 'Date']];
              var txtArray = txt.split('\n');
              for (var i = 0; i < txtArray.length; i++) {
                  var tmpData = txtArray[i].split(/\s+/);
                  dataArray.push([tmpData[0], parseInt(tmpData[1])]);
              }
              var data = google.visualization.arrayToDataTable(dataArray);
              var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
              var options = {width: '100%',
							 height: '40%',
							 legend: 'none',
							 colors: ['red'],
							 hAxis: {
									textStyle:{color: 'white'}},
							vAxis: {
									textStyle:{color: 'white'}},
							 backgroundColor: { fill:'transparent' }};
							 
							 chart.draw(data,options); //forgot this call
							 
              $(window).resize(function(){
				chart.draw(data,options);
			  });
          }
      });

Спасибо за вдохновение!

0 голосов
/ 19 мая 2018

Трудно понять, что происходит, не имея возможности запустить ваш код, но это может быть просто простое исправление CSS.Попробуйте изменить родительский элемент на гибкий контейнер на 100 ватт, а дочерний график на гибкий: 1 

#chart{
  width: 100vw;
  display: flex;
  // adjust the padding accordingly
}

#chart_div {
  flex: 1;
}
...