我正在使用存储在 data.json 文件中的 api 获取 JSON 数据。 随后，JavaScript 使用该 data.json 文件并使用它来绘制 Highcharts 。 JSON 文件每时每刻都在变化，并且 data.json 文件正在随着数据进行更新。我将此 javascript 文件链接到 html 文件，然后在 chrome 浏览器上运行它。由于 data.json 文件每时每刻都在变化，因此与其对应的图表也在每时每刻都在变化。为了查看图表，我必须手动刷新才能看到该图表。如何在不刷新浏览器的情况下显示图表中数据的转换。
我不想动态刷新 DIV 或整个 HTML 页面。 引用:https://onedesigncompany.com/
与本网站中的转换类似。 这就是我的graph好像 这是我的 html + javascript 代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
enter code here<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js" type="text/javascript"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#container").load("index.html");
var options = {
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Number of people Versus floor'
},
xAxis: {
title: {
enabled: true,
text: 'Uids'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Floor'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'uid: {point.x} , floor: {point.y} '
}
}
},
// series: [{}]
};
$.getJSON('/static/data/data.json', function(data) {
//floor0 data
var floor0=[];
var i,j;
for(i=0;i<data.size;i++)
{
if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="0")
floor0.push(data.occupancy_information[i].uids);
}
var merged0 = [].concat.apply([], floor0);
var result0=[];
result0=merged0.map(Number);
var len0=result0.length;
var iMax0 = len0;
var jMax0 = 2;
var f0 = new Array();
for (i=0;i<iMax0;i++) {
f0[i]=new Array();
for (j=0;j<jMax0;j++) {
f0[i][0]=parseInt(merged0[i]);
f0[i][1]=0;
}
}
//floor1 data
var floor1=[];
for(i=0;i<data.size;i++)
{
if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="1")
floor1.push(data.occupancy_information[i].uids);
}
var merged1 = [].concat.apply([], floor1);
var result1=[];
result1=merged1.map(Number);
var len1=result1.length;
var iMax1 = len1;
var jMax1 = 2;
var f1 = new Array();
for (i=0;i<iMax1;i++) {
f1[i]=new Array();
for (j=0;j<jMax1;j++) {
f1[i][0]=parseInt(merged1[i]);
f1[i][1]=1;
}
}
//floor2 data
var floor2=[];
for(i=0;i<data.size;i++)
{
if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="2")
floor2.push(data.occupancy_information[i].uids);
}
var merged2 = [].concat.apply([], floor2);
var result2=[];
result2=merged2.map(Number);
var len2=result2.length;
var iMax2 = len2;
var jMax2 = 2;
var f2 = new Array();
for (i=0;i<iMax2;i++) {
f2[i]=new Array();
for (j=0;j<jMax2;j++) {
f2[i][0]=parseInt(merged2[i]);
f2[i][1]=2;
}
}
//floor3 data
var floor3=[];
for(i=0;i<data.size;i++)
{
if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="3")
floor3.push(data.occupancy_information[i].uids);
}
var merged3 = [].concat.apply([], floor3);
var result3=[];
result3=merged3.map(Number);
var len3=result3.length;
var iMax3 = len3;
var jMax3 = 2;
var f3 = new Array();
for (i=0;i<iMax3;i++) {
f3[i]=new Array();
for (j=0;j<jMax3;j++) {
f3[i][0]=parseInt(merged3[i]);
f3[i][1]=3;
}
}
//floor4 data
var floor4=[];
for(i=0;i<data.size;i++)
{
if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="4")
floor4.push(data.occupancy_information[i].uids);
}
var merged4 = [].concat.apply([], floor4);
var result4=[];
result4=merged4.map(Number);
var len4=result4.length;
var iMax4 = len4;
var jMax4 = 2;
var f4 = new Array();
for (i=0;i<iMax4;i++) {
f4[i]=new Array();
for (j=0;j<jMax4;j++) {
f4[i][0]=parseInt(merged4[i]);
f4[i][1]=4;
}
}
//floor5 data
var floor5=[];
for(i=0;i<data.size;i++)
{
if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="5")
floor5.push(data.occupancy_information[i].uids);
}
var merged5 = [].concat.apply([], floor5);
var result5=[];
result5=merged5.map(Number);
var len5=result5.length;
var iMax5 = len5;
var jMax5 = 2;
var f5 = new Array();
for (i=0;i<iMax5;i++) {
f5[i]=new Array();
for (j=0;j<jMax5;j++) {
f5[i][0]=parseInt(merged5[i]);
f5[i][1]=5;
}
}
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: 'Ground floor',
data: f0
}, false);
chart.addSeries({
name: 'First Floor',
data: f1
}, false);
chart.addSeries({
name: 'Second Floor',
data: f2
}, false);
chart.addSeries({
name: 'Third Floor',
data: f3
}, false);
chart.addSeries({
name: 'Fourth Floor',
data: f4
}, false);
chart.addSeries({
name: 'Fifth Floor',
data: f5
}, false);
chart.redraw();
});
});
</script>最佳答案
将ajax/getJson保持在设定的间隔内，并在按摩器函数每五秒返回一次数据时将数据传递给按摩器函数，这样页面就不会刷新。
看这个例子
var time_interval = 5000;
setInterval(function () {
$.ajax({
url: 'your_path_to_the_api',
data: '',
cache: false,
type: 'POST',
success: function (data) {
$('#container').text(data);
}
});
}, time_interval);
关于javascript - 如何在不刷新html网页的情况下显示highchart系列图中的过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34072700/