Question

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

问题在于，当我尝试使用第二个javascript文件绘制另一个python函数（具有其他值）的第二个图形来绘制图形并在另一个container {{中呈现图形时1}}，第一个函数（第一个图）和第二个函数的值都在第二个图中绘制，第一个图是空白的。

我的python文件中有两个函数可以得到两个不同的值集（div函数用于第一个图形，live_data()用于第二个图形：

temp_data()

highcharts.js（这是从第一个函数@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路径获取的值）：

/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

我只为highchartsTemp.js添加了一个代码片段，因为它与highcharts.js几乎相同，除了图形的某些标签属性之外，只更改了函数名称，url，图表变量。正在呈现图表的html代码片段：

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
            }
        },

以下是正在展示的内容：

以下是运行python脚本时终端上显示的内容：

 <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>

终端上的输出显示正在接收来自路由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的数据。但来自这些路线的数据正在呈现在同一个图表中。

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。

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

1 个答案: