用django框架，使用highcharts实时刷新曲线图将x轴y轴数据换成数据库里的数据

在Django框架下models.py中中创建一个类，给数据库输入几条数据

点击查看代码

class Host_List(models.Model):
    id = models.AutoField(primary_key=True)
    number = models.CharField(max_length=100)

建立数据库大家都会，就不多说了。

接下来是views.py

点击查看代码

def index(request):    
    users = models.Host_List.objects.all()  # 获取全部数据
    listx = []
    listy = []
    for user in users:  # 遍历，拼横纵坐标
        listx.append(int(user.id))
        listy.append(int(user.number))
    return render(request, "index.html", {'users': users, 'X': listx,'Y': listy})  # 跳转到index.html，并将拼好的数据（{'users':users, 'X':listx, 'Y':listy}）传递到该页面

html文件命名为index.html，具体代码如下

点击查看代码


<!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>
        Highcharts.setOptions({
            chart: {
                backgroundColor:'rgba(16,40,156,0.1)',

                borderWidth: 0,           //画布边框宽度
                plotBackgroundColor: 'rgba(16,40,156,0.1)',    //绘图区背景颜色
                plotShadow: true,
                plotBorderWidth: 1,     //绘图区边框宽度

            }
        });
        Highcharts.setOptions({
            global: {
                useUTC: false,   //是否使用世界标准时间
            },
        });
        function activeLastPointToolip(chart) {
            var points = chart.series[0].points;
            chart.tooltip.refresh(points[points.length -1]);
        }
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {   //load表示图表加载完后触发
                        var series = this.series[0],
                            chart = this;
                        activeLastPointToolip(chart);
                        var X = {{ X|safe }};
                        var Y = {{ Y|safe }};
                        var i = 0;
                        var mym = setInterval(function() {   //设置定时器
                            if (i < X.length - 1) {     
                                i = i + 1
                            } else {
                                clearInterval(mym);    //清除定时器
                            }
                            var x = X[i];
                            var y = Y[i];
                            series.addPoint([x, y], 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       // 禁用版权信息
        },
        series: [{
            name: '数据1',
            data: (function () {
                // 初始化的坐标轴
                var X = {{ X|safe }};
                var Y = {{ Y|safe }};
                var data = [];
                var i;
                for (i = -10; i <= 0; i += 1) {  //-10:最多显示点10个
                    data.push({
                        x: X[i],
                        y: Y[i]
                    })
                }
                return data;
            }()),
        }]
    });
    </script>
</body>
</html>

posted on 2022-05-26 15:01 寒梅煮雪阅读(223) 评论(0) 收藏举报