gpt4 book ai didi

javascript - 谷歌图表响应

转载 作者:行者123 更新时间:2023-11-28 04:26:51 25 4
gpt4 key购买 nike

所以我有这个绘制图表的功能,我已经对其进行了一些更改以尝试使图表具有响应性,但我无法做到...

函数如下:

$(document).ready(function(){
google.charts.load('current', {'packages': ['corechart']});
//alert('aa00'~
$('.error').hide();
$(".buttonSala").click(function() {
// validate and process form here
$('.error').hide();
var nome = $( "#nomeSala option:selected" ).val();
var objeto = $( "#sensorSala option:selected" ).val();
var canal = $( "#canalSala option:selected" ).val();
var datai = $("#datainisala").val();
var dataf = $("#datafimsala").val();

//alert(canal);
// Send the data using post
var posting = $.post( "getSala.php", { canal: canal, dataini: datai, datafim: dataf, objeto: objeto } );

// Put the results in a div
posting.done(
function drawChart1( data ) {
// Set a callback to run when the Google Visualization API is loaded.

$('.box-title').html(nome);
var response = JSON.parse(data);
var jsonData = response.channels[canal].values;
var desciption = response.channels[canal].info.chname;
google.charts.setOnLoadCallback(function() {
dataArray = [["ts", desciption ]];

for (var i = 0; i < jsonData.length; i++)
{
var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))];
dataArray.push(tempArray);
}

// Create our data table out of JSON data loaded from server.
var data = google.visualization.arrayToDataTable(
dataArray
);

var options = {
curveType: 'function',
backgroundColor: '#fff',
colors: ['#5d4a50'],
vAxis: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#666', fontSize: 16
}
},
legend: { position: 'bottom', textStyle: {
color: '#666', fontSize: 18
} }
};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);

}
);
});

$(window).resize(function(){
drawChart1();
});


return false;
});

});

然后在我的 css 上我已经添加了这个:

.chart {
width: 100%;
min-height: 450px;
}

我的 html 是这样的:

<div class="row">
<div class="col-md-12">
<div id="chart_div" class="chart"></div>
</div>
</div>

但是图表仍然没有响应...正在绘制图表的 div 已经响应,但是当我调整窗口大小时,里面的图表只是被剪切...

有什么建议吗?

最佳答案

首先,您可以依靠来自 google 的回调来了解文档何时准备就绪,
而不是 --> $(document).ready(...

回调可以放在load语句中,
无需每次绘制图表时都使用setOnLoadCallback

推荐类似于以下代码片段的设置...

google.charts.load('current', {
callback: function () {
var googleChart = new google.visualization.AreaChart(document.getElementById('chart_div'));
var googleData = null;

$('.buttonSala').click(getData);
$(window).resize(drawChart);

function getData() {
$('.error').hide();
var nome = $( "#nomeSala option:selected" ).val();
$('.box-title').html(nome);
var objeto = $( "#sensorSala option:selected" ).val();
var canal = $( "#canalSala option:selected" ).val();
var datai = $("#datainisala").val();
var dataf = $("#datafimsala").val();
var posting = $.post( "getSala.php", { canal: canal, dataini: datai, datafim: dataf, objeto: objeto } );
posting.done(processData);
return false;
}

function processData(data) {
var response = JSON.parse(data);
var jsonData = response.channels[canal].values;
var desciption = response.channels[canal].info.chname;
dataArray = [["ts", desciption ]];

for (var i = 0; i < jsonData.length; i++) {
dataArray.push([
jsonData[i].ts,
parseFloat(jsonData[i].value.replace(",", "."))
]);
}

var googleData = google.visualization.arrayToDataTable(
dataArray
);
drawChart();
}

function drawChart() {
if (googleData === null) {
return;
}
googleChart.draw(googleData, {
curveType: 'function',
backgroundColor: '#fff',
colors: ['#5d4a50'],
vAxis: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#666',
fontSize: 16
}
},
legend: {
position: 'bottom',
textStyle: {
color: '#666', fontSize: 18
}
}
});
}
},
packages: ['corechart']
});

关于javascript - 谷歌图表响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41926965/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com