Question

我在覆盆子pi上遇到了我的网络服务器问题。我有这两个文件（以及其他文件）：view_action.php和graph.html。

第一个文件的功能之一是将用户重定向到文件graph.html。

graph.html是Flot图表实时示例的副本。我必须包含在代码中的文件：jquery.js，jquery.flot.js和excanvas.min.js与上面的文件位于同一文件夹中。因此，graph.html上唯一改变的是这3个文件的路径。

这里是graph.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">

$(function() {

    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data = [],
        totalPoints = 300;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk

        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    // Set up the control widget

    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 2000) {
                updateInterval = 2000;
            }
            $(this).val("" + updateInterval);
        }
    });

    var plot = $.plot("#placeholder", [ getRandomData() ], {
        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();

    // Add the Flot version string to the footer

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

</script>
</head>
<body>

<div id="header">
    <h2>Real-time updates</h2>
</div>

<div id="content">

    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>

    <p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>

    <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>

</div>

<div id="footer">
    Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
</div>

当view_action.php重定向到graph.html时，它只显示标题和正文的信息。没有图表。我认为我的网络服务器没有运行javascript代码。有什么问题？

谢谢，里卡多

Answer 1

您需要为占位符div元素指定宽度和高度（请参阅readme）。在原始示例中，这是在example.css中完成的。检查代码中CSS文件的路径是否正确（您有href="../examples.css"）。

更改

    <div id="placeholder" class="demo-placeholder"></div>

到

    <div id="placeholder" class="demo-placeholder" style="width: 800px; height: 450px;"></div>

如果您不想使用CSS文件，

或类似应该解决该问题。

如何在Web服务器上使用FLOT图表示例？

1 个答案: