javascript - AJAX 在单个 Highcharts 图表中显示来自两个不同函数的值，而不是两个不同的值

Question

我已经使用 HighCharts、Flask 和 Python 成功地绘制了一个实时图表。 javascript 文件 (highcharts.js) 从 python 中的(a)函数中获取值，并继续使用 AJAX 从中获取更新的数据。然后图形在 HTML 的 container div 中呈现。这适用于页面上的单个图表。

问题是，当我尝试制作第二个图表来绘制另一个 python 函数(具有其他值)的值时，使用第二个 javascript 文件绘制图表并在另一个 container div，第一个函数(对于第一个图)和第二个函数的值都绘制在第二个图中，第一个图是空白的。

我的 python 文件中有两个函数，它们获取两个不同的值集(live_data() 函数用于第一个图，temp_data() 用于第二张图):

@app.route('/live-data')
def live_data():
    lux=readLight() #gets value of light sensor
    # Create a PHP array and echo it as JSON
    data1 = [time() * 1000,lux]
    response1 = make_response(json.dumps(data1))
    response1.content_type = 'application/json'
    return response1

@app.route('/liveTempData')
def temp_data():
    humidity,temperature = Adafruit_DHT.read_retry(11, 4)
    print('Temp={0:0.1f}*C'.format(temperature))
    data2 = [time() * 1000,temperature]
    response2 = make_response(json.dumps(data2))
    response2.content_type = 'application/json'
    return response2

highcharts.js(这从 /live-data 路由获取值，这是第一个函数):

var chart1;

/**
 * Request data from the server, add it to the graph and set a timeout
 * to request again
 */
function requestLightData() {
    $.ajax({
        url: '/live-data',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestLightData, 1000);
        },
        cache: false
    });
}

$(document).ready(function() {
    chart1 = new Highcharts.Chart({
        chart: {
            //render to div data-container in HTML
            renderTo: 'data-container',
            defaultSeriesType: 'spline',
            events: {
                load: requestLightData
            }
        },
        title: {
            text: 'Luminosity Values'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Values',
                margin: 80
            }
        },
        credits: {
        enabled: false
       },
        series: [{
            name: 'Light',
            data: []
        }]
    });
});

来自 highchartsTemp.js 的代码片段(这从 /liveTempData 路由获取值，这是第二个函数):

var chart;

/**
 * Request data from the server, add it to the graph and set a timeout
 * to request again
 */
function requestData() {
    $.ajax({
        url: '/liveTempData',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestData, 1000);
        },
        cache: false
    });
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            //render to div data-container2 in HTML
            renderTo: 'data-container2',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },

我只添加了highchartsTemp.js 的代码片段，因为它与highcharts.js 几乎相同，除了函数名称、url、图表变量之外，除了图形的一些标签属性外，其他都发生了变化。 呈现图表的 html 代码片段:

 <div class="row">
      <!-- first graph -->
      <div class="container-fluid" id="data-container"></div>

    </div>

      <div class="row">
       <!-- first graph -->
      <div class="container-fluid" id="data-container2"></div>

    </div>

这是正在显示的内容:

下面是我运行 python 脚本时终端上显示的内容:

192.168.100.4 - - [03/Apr/2018 21:25:35] "GET /live HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:35] "GET /static/js/highcharts.js HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:35] "GET /static/js/highchartsTemp.js HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:40] "GET /live HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:41] "GET /live-data?_=1522790899360 HTTP/1.1" 200 -
Temp=27.0*C
192.168.100.4 - - [03/Apr/2018 21:25:42] "GET /liveTempData?_=1522790899379 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:42] "GET /live-data?_=1522790900414 HTTP/1.1" 200 -
Temp=26.0*C
192.168.100.4 - - [03/Apr/2018 21:25:43] "GET /liveTempData?_=1522790900967 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:43] "GET /live-data?_=1522790901451 HTTP/1.1" 200 -
Temp=26.0*C
192.168.100.4 - - [03/Apr/2018 21:25:45] "GET /liveTempData?_=1522790902535 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:45] "GET /live-data?_=1522790902547 HTTP/1.1" 200 -
Temp=26.0*C
192.168.100.4 - - [03/Apr/2018 21:25:46] "GET /liveTempData?_=1522790904108 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:46] "GET /live-data?_=1522790904120 HTTP/1.1" 200 -
Temp=26.0*C

终端上的输出显示正在接收来自路由 /liveTempData 和 /live-data 的数据。但是来自这些路线的数据正在呈现到同一张图表。

Answer 1

我已经能够解决它了。实际上我没有为下面的函数正确使用我的变量 chart1 。它没有这样改变:

var chart1;

/**
 * Request data from the server, add it to the graph and set a timeout
 * to request again
 */
function requestLightData() {
    $.ajax({
        url: '/live-data',
        success: function(point) {
            var series = chart1.series[0],
                shift = series.data.length > 20; // shift if the series is
                                                 // longer than 20

            // add the point
            chart1.series[0].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestLightData, 1000);
        },
        cache: false
    });
}

我还将两个js脚本合并到一起，即我将highchartsTemp.js中的所有内容都添加到highcharts.js中，并删除了从我的 HTML 文件中编写 highchartsTemp.js 脚本。