Question

我有一个谷歌折线图，加载页面后没有显示。在第一次调整大小后一切正常。如何在加载页面后显示图表？

数据来自服务器上的区域设置文本文件。此文本文件包含日期/时间和传感器值。 Textfile被分割并作为图表的数据进行分割。

＆＃13;

 	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);

＆＃13;

/* Chart */
	#chart{
		width: 100%; 
	}

＆＃13;

<div id="chart">
    <div id="chart_div"></div>
</div>

＆＃13;

谢谢你！

Answer 1

很难知道在没有运行代码的情况下发生了什么，但它可能只是一个简单的css修复。尝试将父级更改为100vw的Flex容器，并将子级图表更改为flex：1

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

#chart_div {
  flex: 1;
}

Answer 2

我忘了调用绘图功能。

第一次调用是在调整大小功能中。

 Object.keys(example).forEach()

感谢您的灵感！

响应式Google图表仅在首次调整大小后显示

2 个答案: