用django框架，使用highcharts实时刷新曲线图将x轴y轴数据换成数据库里的数据，并且同时刷新多条曲线
作者：互联网
前面已经说了用django框架，使用highcharts实时刷新曲线图将x轴y轴数据换成数据库里的数据，接下来说一下怎么同时刷新多条曲线。
首先创建数据库，在Django框架里的models.py下输入如下代码，建立数据库。
点击查看代码
class Host_List(models.Model):
id = models.AutoField(primary_key=True)
number = models.CharField(max_length=100)
R = models.CharField(max_length=100)
L = models.CharField(max_length=100)
点击查看代码
def index1(request): #实时刷新三条曲线
users = models.Host_List.objects.all() # 获取全部数据
listx = []
listy = []
listz = []
listw = []
for user in users: # 遍历，拼横纵坐标
listx.append(int(user.id))
listy.append(int(user.number))
listz.append(int(user.R))
listw.append(int(user.L))
return render(request, "index1.html",
{'users': users,
'X': listx,
'Y': listy,
'Z': listz,
'W': listw})
# 跳转到index1.html，并将拼好的数据（{'users':users, 'X':listx, 'Y':listy，'Z': listz,'W': listw}）传递到该页面
点击查看代码
<!DOCTYPE html>
<html>
<head>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="refresh">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>工艺过程数据监控</title>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:200px;width:900px;height:480px;"></div>
<script src="../static/jquery-1.12.4.js"></script>
<script>
Highcharts.setOptions({
chart: {
backgroundColor:'rgba(16,40,156,0.1)',
borderWidth: 0, //画布边框宽度
plotBackgroundColor: 'rgba(16,40,156,0.1)', //绘图区背景颜色
plotShadow: true,
plotBorderWidth: 1, //绘图区边框宽度
}
});
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
}
var chart = Highcharts.chart('container', {
chart: {
type: 'spline',
marginRight: 10,
events: {
load: function () { //load表示图表加载完后触发
var series = this.series[0],
series2 = this.series[1],
series3 = this.series[2],
chart = this;
activeLastPointToolip(chart);
activeLastPointToolip(chart);
activeLastPointToolip(chart);
var X = {{ X|safe }};
var Y = {{ Y|safe }};
var Z = {{ Z|safe }};
var W = {{ W|safe }};
var i = -1;
var mym = setInterval(function() { //设置定时器
if (i < X.length - 1) {
i = i + 1
} else {
clearInterval(mym); //清除定时器
}
var x = X[i];
var y = Y[i];
var z = Z[i];
var w = W[i];
series.addPoint([x, y], true, true);
activeLastPointToolip(chart);
series2.addPoint([x, z], true, true);
activeLastPointToolip(chart);
series3.addPoint([x, w], true, true);
activeLastPointToolip(chart);
}, 1000); //1000：一秒更新一个点
}
}
},
title: {
text: '动态模拟实时数据',
style:{
color:'white',
fontSize:'19px'
}
},
xAxis: {
tickPixelInterval: 150,
tickColor:'white',
labels:{
style:{
fontSize:'16px',
color:'white'
}
}
},
yAxis: {
title: {
text: null
},
labels:{
style:{
fontSize:'16px',
color:'white'
}
}
},
legend: {
enabled: false
},
credits:{
enabled: false // 禁用版权信息
},
tooltip: {
style:{
fontSize:'16px', //提示框文字字体
},
shared: true, // 提示框是否共享
formatter: function () { // 提示框格式化字符串
var s = this.x;
$.each(this.points, function () {
s += '<br /><span style="color:' + this.point.series.color + ';">' + this.series.name + ':</span><b style="color:' + this.point.series.color + ';">' + this.y + '</b>';
});
return s;
}
},
series: [{
name: '数据1',
data: (function () {
// 初始化的坐标轴
var X = {{ X|safe }};
var Y = {{ Y|safe }};
var data = [];
var i;
for (i = -6; i <= 0; i += 1) { //-10:最多显示10个点
data.push({
x: X[i],
y: Y[i]
})
}
return data;
}()),
lineWidth: 4, //曲线宽度
},{
name: '数据2',
data: (function () {
// 初始化的坐标轴
var X = {{ X|safe }};
var Z = {{ Z|safe }};
var data = [];
var i;
for (i = -6; i <= 0; i += 1) { //-10:最多显示10个点
data.push({
x: X[i],
z: Z[i]
})
}
return data;
}()),
color: 'green', //曲线颜色
lineWidth: 3, //曲线宽度
},{
name: '数据3',
data: (function () {
// 初始化的坐标轴
var X = {{ X|safe }};
var W = {{ W|safe }};
var data = [];
var i;
for (i = -6; i <= 0; i += 1) { //-10:最多显示10个点
data.push({
x: X[i],
w: W[i]
})
}
return data;
}()),
color: 'orange', //曲线颜色
lineWidth: 4, //曲线宽度
}]
});
</script>
</body>
</html>
标签：models,series,chart,activeLastPointToolip,django,刷新,var,true,highcharts 来源： https://www.cnblogs.com/hmzx/p/16313608.html