Javascript 从Google图表重新加载图表数据
我有这段代码，实际上它工作得很好，除了一件事，当我删除datos.json上的一些数据，或者添加一些新的数据时，图表不会刷新数据，尽管，如果我删除datos.json，它已经向我显示了旧数据，我不知道它从哪里获得这些信息仅当我在服务器“$service httpd restart”上执行此操作时，才会正确重新加载数据：Javascript 从Google图表重新加载图表数据,javascript,html,json,charts,google-visualization,Javascript,Html,Json,Charts,Google Visualization,我有这段代码，实际上它工作得很好，除了一件事，当我删除datos.json上的一些数据，或者添加一些新的数据时，图表不会刷新数据，尽管，如果我删除datos.json，它已经向我显示了旧数据，我不知道它从哪里获得这些信息仅当我在服务器“$service httpd restart”上执行此操作时，才会正确重新加载数据： <html> <head> <script type="text/javascript" src="https://www.google
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Included Jquery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.getJSON("datos.json", function(response){
var datos_end = google.visualization.arrayToDataTable(response.data);
var datos_end2 = google.visualization.arrayToDataTable(response.data2);
var options = {
width: 900,
chart: {
title: 'Datos de los sensores',
subtitle: 'CO2,CO,VOC,PM2.5'
},
series: {
0: { axis: 'co2'},
1: { axis: 'co'},
2: { axis: 'voc'},
3: { axis: 'pm2'}
},
axes: {
y: {
co2: {label: 'ppm'},
co: {label: 'ppm'},
voc: {side: 'right', label: 'ppb'},
pm2: {side: 'left', label: 'ppm'}
}
}
};
var options2 = {
width: 900,
chart: {
title: 'Datos sensores 2',
subtitle: 'Temperatura y humedad a la izq., presion a laderecha'
},
series: {
0: { axis: 'temperatura' },
1: { axis: 'presion' },
2: { axis: 'humedad'}
},
axes: {
y: {
temperatura: {label: 'grados centigrados'},
presion: {side: 'right', label: 'bar'},
humedad: {side: 'left', label: '%'}
}
}
};
var chart = new google.charts.Bar(document.getElementById('div1'));
var chart2 = new google.charts.Bar(document.getElementById('div2'));
chart.draw(datos_end, options);
chart2.draw(datos_end2, options2);
})
.success(function() {
console.log("success");
})
.error(function(jqXHR, textStatus, errorThrown) {
console.log("error " + textStatus);
console.log("incoming Text " + jqXHR.responseText);})
.complete(function() {
console.log("success");
});
}
</script>
</head>
<body>
<button onclick='location.reload(true)'>REFRESH DATA</button>
<p>
<div id="div1" style="width: 900px; height: 500px;"></div>
</p>
<p>
<div id="div2" style="width: 900px; height: 500px;"></div>
</p>
</body>
</html>
load（“可视化”、“1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
$.getJSON（“datos.json”），函数（响应）{
var datos_end=google.visualization.arrayToDataTable（response.data）；
var datos_end2=google.visualization.arrayToDataTable（response.data2）；
变量选项={
宽度：900，
图表：{
标题：'Datos de los Sensors'，
字幕：“CO2、CO、VOC、PM2.5”
},
系列：{
0:{轴：'co2'}，
1:{axis:'co'}，
2:{axis:'voc'}，
3:{轴：'pm2'}
},
轴线：{
y:{
二氧化碳：{标签：'ppm'}，
co:{label:'ppm'}，
voc:{side:'right'，label:'ppb'}，
pm2:{side:'left'，label:'ppm'}
}
}
};
var选项2={
宽度：900，
图表：{
标题：“Datos传感器2”，
副标题：“温度和湿度，压力和湿度”
},
系列：{
0:{axis:'temperaturea'}，
1:{axis:'presion'}，
2:{axis:'humedad'}
},
轴线：{
y:{
温度：{标签：'grados centigrados'}，
说明：{侧面：'右侧'，标签：'条形'}，
humedad:{side:'left'，标签：''}
}
}
};
var chart=new google.charts.Bar（document.getElementById（'div1'）；
var chart2=新的google.charts.Bar（document.getElementById（'div2'）；
图表绘制（datos_end，选项）；
图表2.绘图（datos_end2，选项2）；
})
.success（函数（）{
控制台日志（“成功”）；
})
.error（函数（jqXHR、textStatus、errorshown）{
console.log（“错误”+textStatus）；
log（“传入文本”+jqXHR.responseText）；}）
.complete（函数（）{
控制台日志（“成功”）；
});
}
刷新数据
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"</script>
<!-- Included Jquery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["bar"]});
google.setOnLoadCallback(getData);
function getData() {
$.getJSON("datos.json", function(response){
dwarChart(response.data, response.data2);
})
.success(function() {
console.log("success");
})
.error(function(jqXHR, textStatus, errorThrown) {
console.log("error " + textStatus);
console.log("incoming Text " + jqXHR.responseText);})
.complete(function() {
console.log("success");
});
}
function drawChart(data1, data2) {
var datos_end = google.visualization.arrayToDataTable(data1);
var datos_end2 = google.visualization.arrayToDataTable(data2);
var options = {
width: 900,
chart: {
title: 'Datos de los sensores',
subtitle: 'CO2,CO,VOC,PM2.5'
},
series: {
0: { axis: 'co2'},
1: { axis: 'co'},
2: { axis: 'voc'},
3: { axis: 'pm2'}
},
axes: {
y: {
co2: {label: 'ppm'},
co: {label: 'ppm'},
voc: {side: 'right', label: 'ppb'},
pm2: {side: 'left', label: 'ppm'}
}
}
};
var options2 = {
width: 900,
chart: {
title: 'Datos sensores 2',
subtitle: 'Temperatura y humedad a la izq., presion a la derecha'
},
series: {
0: { axis: 'temperatura' },
1: { axis: 'presion' },
2: { axis: 'humedad'}
},
axes: {
y: {
temperatura: {label: 'grados centigrados'},
presion: {side: 'right', label: 'bar'},
humedad: {side: 'left', label: '%'}
}
}
};
var chart = new google.charts.Bar(document.getElementById('div1'));
var chart2 = new google.charts.Bar(document.getElementById('div2'));
chart.draw(data1, options);
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<button onclick='location.reload(true)'>REFRESH DATA</button>
<p>
<div id="div1" style="width: 900px; height: 500px;"></div>
</p>
<p>
<div id="div2" style="width: 900px; height: 500px;"></div>
</p>
</body>
</html>
听起来像是浏览器缓存。尝试向请求中添加一个随机查询字符串可能吗？某些人在请求的日期/时间使其每次都是唯一的。您已经尝试过什么了？我尝试使用不同的浏览器，从服务器datos.json中删除，添加新数据，并重新启动http deamon，唯一有效的方法是重新启动httpd，但只有添加新数据时，如果数据被删除，则始终显示。您是否尝试使用Fiddler或Chrome Dev Tools之类的工具检查浏览器和服务器之间的通信量？这会告诉您浏览器是否正在缓存您的数据。不是，我将尝试，我稍后再来！：D@Balrog30它从缓存中获取：来自谷歌图表和字体s的css数据泰勒。。。