创建实时网络应用程序答案

【问题标题】：Creating a live web app创建实时网络应用程序
【发布时间】：2015-01-20 15:52:03
【问题描述】：

我必须制作一个使用 Highcharts 动态更新数据的应用程序。这不是一个大问题，因为他们有一个很好的教程。该示例运行良好。

当我不想在多个设备上共享这个应用程序（使用 xampp）时，我遇到了一些问题。当我打开我的 web 应用程序的链接时：

http://IP-adress/ENRGYMONITOR/index.html

图表显示，但没有数据显示或更新。这是我写的javascript：

var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
    $.ajax({
        url: 'http://localhost/live-server-data.php',
        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(eval(point), true, shift);
            // call it again after one second
            setTimeout(requestData, 5000);
        },
        cache: false
    });
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });
});

谁能告诉我问题是什么？

【问题讨论】：

标签： javascript web highcharts xampp webserver

【解决方案1】：

您的$.ajax 呼叫失败：

url: 'http://localhost/live-server-data.php'

这里的“localhost”是运行客户端（网络浏览器）的计算机，而不是发送数据的服务器。

您应该尽量避免使用绝对 URL。将其修改为：

 url: 'live-server-data.php'

假设（这很重要）live-server-data.php 与 index.html 位于同一目录中

【讨论】：

非常感谢，这解决了我的问题。