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

2022/5/27 2:20:23

编程Tag： 刷新 Django var highcharts true chart Series models activeLastPointToolip

本文主要是介绍用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)

然后在views.py中

点击查看代码

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}）传递到该页面

建立html文件，命名为index1.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 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>

这篇关于用django框架，使用highcharts实时刷新曲线图将x轴y轴数据换成数据库里的数据，并且同时刷新多条曲线的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章