多个图表从一条烧瓶路线获取数据

Question

我正在尝试编写一个flask应用程序，在该应用程序中，一个路由将在不同的时间段将具有3个整数的数组传递给某些HTML代码。在HTML中，对于给定的时间戳，我想更新3个图形。例如，如果路线在时间t传递数组值= [a，b，c]，我希望图1显示点（t，value [0]），图2显示点（t，value [1]）图3显示（t，value [2]）。使用现在的代码，我只看到图3得到更新。我尝试将EventSource（“ / chart-data1”）变量设置为全局变量，以便所有图表均能处理一个事件，但我无法使其正常工作。

以下是烧瓶应用程序侧的信息：

@application.route('/chart-data1')
def chart_data():
    # channel = input_channel
    ip = session['ip']
    serial = session['serial']
    inst = setup_keysight(ip, serial)
    def generate_power_data1(input_channel, ip, serial, inst):
        while True:
            c_stats, v_stats = keysight_get_channel_stats(inst)
            print(v_stats)

            if input_channel == "1":
                json_data = json.dumps(
                    {'time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'), 'value': v_stats})
                yield f"data:{json_data}\n\n"
            time.sleep(0.25)
    return Response(stream_with_context(generate_power_data1("1", ip, serial, inst)), mimetype='text/event-stream')

这是HTML端。 （抱歉，它有点长）：

{% extends "layout.html" %}

{% block content %}
    <style>
    .flex-box {
      display:flex;
      justify-content:space-between;
      /*outline: 2px dashed blue;*/
    }

    .flex-box-2 {
      display:flex;
      justify-content: flex-end;
      /*outline: 2px deeppink dashed;*/
    }
    </style>

    <div class="main">
    <div class="flex-box">
    <h2 style="color:{{channel_info['1'][1]}}">Channel 1 Status and Info</h2>
    <form action="/done_testing" method="POST">
    <input type="channel" id="channel" name="channel" value="1">
    <button name="forwardBtn" type="submit">Done Testing</button>
    </form>
    </div>
      <!--<h2 style="color:{{channel_info['1'][1]}}">Channel 1 Status and Info</h2> -->
      
      <p>Power Supply IP: {{channel_info["1"][0].ip}}
          <br> Power Supply Serial Number: {{channel_info["1"][0].serial}}
          <br> Power Setting: {{os_name}} {{channel_info["1"][0].power}} Volts
          <br> Current Setting: {{channel_info["1"][0].current}} Amps
          <br> Device Under Test ADB ID: {{channel_info["1"][2]}}
          <br> User: {{channel_info["1"][0].current_user}}
        </p>

      <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script type='text/javascript'> 
          var source = new EventSource("/chart-data1"); 
        </script>
        
        <script>
            $(document).ready(function () {
                const config1 = {
                    type: 'line',
                    data: {
                        labels: [],
                        datasets: [{
                            label: "Power Measurment",
                            backgroundColor: 'rgb(134,207,190)',
                            borderColor: 'rgb(134,207,190)',
                            data: [],
                            fill: false,
                        }],
                    },
                    options: {
                        responsive: true,
                        title: {
                            display: true,
                            text: 'Channel 1 Power Reading'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Time'
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Volts'
                                }
                            }]
                        }
                    }
                };

                const context1 = document.getElementById('canvas').getContext('2d');

                const lineChart1 = new Chart(context1, config1);

                source.onmessage = function (event) {
                    const data1 = JSON.parse(event.data);
                    if (config1.data.labels.length === 10) {
                        config1.data.labels.shift();
                        config1.data.datasets[0].data.shift();
                    }
                    config1.data.labels.push(data.time);
                    config1.data.datasets[0].data.push(data1.value[0]);
                    lineChart1.update();
                }
            });
        </script>

    
      <div class="flex-box">
      <h2 style="color:{{channel_info['2'][1]}}">Channel 2 Status and Info</h2>
      <form action="/done_testing" method="POST">
      <input type="channel" id="channel" name="channel" value="2">
      <button name="forwardBtn" type="submit">Done Testing</button>
      </form>
      </div>
      <!-- <h2 style="color:{{channel_info['2'][1]}}">Channel 2 Status and Info</h2> -->
      <p>Power Supply IP: {{channel_info["2"][0].ip}}
          <br> Power Supply Serial Number: {{channel_info["2"][0].serial}}
          <br> Power Setting: {{os_name}} {{channel_info["2"][0].power}} Volts
          <br> Current Setting: {{channel_info["2"][0].current}} Amps
          <br> Device Under Test ADB ID: {{channel_info["2"][2]}}
          <br> User: {{channel_info["2"][0].current_user}}
        </p>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="canvas2"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script>
            $(document).ready(function () {
                const config = {
                    type: 'line',
                    data: {
                        labels: [],
                        datasets: [{
                            label: "Power Measurment",
                            backgroundColor: 'rgb(134,207,190)',
                            borderColor: 'rgb(134,207,190)',
                            data: [],
                            fill: false,
                        }],
                    },
                    options: {
                        responsive: true,
                        title: {
                            display: true,
                            text: 'Channel 2 Power Reading'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Time'
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Volts'
                                }
                            }]
                        }
                    }
                };

                const context = document.getElementById('canvas2').getContext('2d');

                const lineChart = new Chart(context, config);


                source.onmessage = function (event) {
                    const data = JSON.parse(event.data);
                    if (config.data.labels.length === 10) {
                        config.data.labels.shift();
                        config.data.datasets[0].data.shift();
                    }
                    config.data.labels.push(data.time);
                    config.data.datasets[0].data.push(data.value[1]);
                    lineChart.update();
                }
            });
        </script>

      <div class="flex-box">
      <h2 style="color:{{channel_info['3'][1]}}">Channel 3 Status and Info</h2>
      <form action="/done_testing" method="POST">
      <input type="channel" id="channel" name="channel" value="3">
      <button name="forwardBtn" type="submit">Done Testing</button>
      </form>
      </div>
      <!--<h2 style="color:{{channel_info['3'][1]}}">Channel 3 Status and Info</h2>-->
      <p>Power Supply IP: {{channel_info["3"][0].ip}}
          <br> Power Supply Serial Number: {{channel_info["3"][0].serial}}
          <br> Power Setting: {{os_name}} {{channel_info["3"][0].power}} Volts
          <br> Current Setting: {{channel_info["3"][0].current}} Amps
          <br> Device Under Test ADB ID: {{channel_info["3"][2]}}
          <br> User: {{channel_info["3"][0].current_user}}
        </p>

      <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="canvas3"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <!--suppress JSUnresolvedLibraryURL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script>
            $(document).ready(function () {
                const config = {
                    type: 'line',
                    data: {
                        labels: [],
                        datasets: [{
                            label: "Power Measurment",
                            backgroundColor: 'rgb(134,207,190)',
                            borderColor: 'rgb(134,207,190)',
                            data: [],
                            fill: false,
                        }],
                    },
                    options: {
                        responsive: true,
                        title: {
                            display: true,
                            text: 'Channel 3 Power Reading'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                        },
                        hover: {
                            mode: 'nearest',
                            intersect: true
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Time'
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Volts'
                                }
                            }]
                        }
                    }
                };

                const context = document.getElementById('canvas3').getContext('2d');

                const lineChart = new Chart(context, config);

                // const source = new EventSource("/chart-data3");

                source.onmessage = function (event) {
                    const data = JSON.parse(event.data);
                    if (config.data.labels.length === 10) {
                        config.data.labels.shift();
                        config.data.datasets[0].data.shift();
                    }
                    config.data.labels.push(data.time);
                    config.data.datasets[0].data.push(data.value[2]);
                    lineChart.update();
                }
            });
        </script>


  </div>

{% endblock content %}