Question

我正在尝试使用JQuery使用Flot绘制趋势，但没有发生任何事情。

<head runat="server">
    <title>Phenomena Tactical Detail</title>
    <link href="../Styles/MainStyle.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.flot.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var data = [[0, 3], [4, 8], [10, 2]];
            var area = $("#plotArea");
            $.plot(area, data);
        });
    </script>
</head>

我的div直接放在表格中：

<div class="inCenter">
    <div id="plotArea" style="width:600px; height:400%"></div>
    <br />
    <asp:Label ID="trendTimeLabel" runat="server"></asp:Label>
</div>

我已经在线检查了多个教程和Flot网站以获得指导，但我的div是空的，甚至没有指定的大小。

编辑：我现在已经将数组值设为字符串，但仍然没有。

var data = [["0", "3"], ["4", "8"], ["10", "2"]];

Answer 1

您的数据阵列没有任何问题。

尝试将脚本更改为：

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    var data = [[0, 3], [4, 8], [10, 2]];
    var area = "#plotArea";
    $.plot(area, [data]);
});
</script>

我在Chome Console（F12 dev工具）中也遇到了关于图表高度宽度的错误：

通过将html更改为：

来修复

<div class="inCenter">
    <div class="demo-container">
        <div id="plotArea" class="demo-placeholder"></div>
    </div>
    <br />
    <asp:Label ID="trendTimeLabel" runat="server"></asp:Label>
</div>

复制flot下载中的examples.css中的样式，here供您参考：

.demo-container {
    box-sizing: border-box;
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

希望这应该让它发挥作用。

Answer 2

新在他们编写的文档的另一部分中似乎我错了：

请注意，为了简化Flot中的内部逻辑，x和y值必须是数字（即使指定时间序列，请参阅下文，了解如何执行此操作）。这是一个常见问题，因为您可能会从数据库中检索数据并将它们直接序列化为JSON，而不会注意到错误的类型。如果你遇到了神秘的错误，请仔细检查你输入的数字而不是字符串。

你所犯的真正错误似乎是数据参数需要是点数组的数组（系列）。因此，再次从数据数组中删除引号，然后使用如下的绘图函数：

var data = [[0, 3], [4, 8], [10, 2]]; $.plot(area, [ data ]);

<强>旧：根据fl FAQ，您必须使用字符串而不是数字。

实际上，Flot喜欢JSON数据，你只是格式错误。仔细检查您是否输入了字符串而不是数字，例如[[“0”，“ - 2.13”]，[“5”，“4.3”]]。这是最常见的错误，错误可能不会立即显示，因为Javascript可以自动执行某些转换。

所以你应该将你的数组改为：

var data = [["0", "3"], ["4", "8"], ["10", "2"]];

为什么我的JQuery Flot没有工作？

2 个答案: