Question

我想显示一个折线图，其中点被动态添加到多个系列（即显示进度）。 y轴：显示小数点后一个数字的浮点数和x axi：时间，理想情况下格式化为小时：分钟：秒。这是使用Ajax获取的实时数据，返回格式为JSON。

返回的数据：

    [
    {
        "label": "s#2 ch#1 (ch un)",    "data": [1421941072,24.8]
    }
    ,
    {
        "label": "s#2 ch#2 (2_ch2)",    "data": [1421941072,23.9]   
    }
    ,
    {
        "label": "s#2 ch#3 (N/A)",  "data": [1421941072,23.9]
    }
    ]

Javascript正在显示图表中间的一个大点和正确的图例，没有别的。

没有JavaScript错误。有效的JSON。这令人抓狂。

完整的代码：

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.validity.js"></script>
    <link href="./flotexamples.css" rel="stylesheet" type="text/css">
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.time.js"></script>
    <script type="text/javascript">
    function fetchData() 
    {
        $.ajax({
            url: "/graphlist.php",
            type: "GET",
            dataType: "json",
            success: onDataReceived
        });

        function onDataReceived(series) 
        {
            data = series;     

            var options = 
            {
                series: 
                {
                    lines: 
                    {
                        show: true,
                    },
                    points: {
                        show: true
                    }
                },
                xaxis: 
                {
                    mode: "time"
                },
                yaxis: 
                {       
                    tickDecimals: 1
                }
            };

            $.plot("#placeholder", data, options);
        }
    }

    // every 5 seconds
    var interval = 5000;

    var tid = setInterval(fetchData, interval);
    </script>

任何帮助非常感谢！ TIA，伯特

Answer 1

您的数据格式不正确。如果我正确地解释你的意图，数据应该是

[
{
    "label": "s#2 ch#1 (ch un)",    "data": [[1421941072,24.8]]
}
,
{
    "label": "s#2 ch#2 (2_ch2)",    "data": [[1421941072,23.9]]
}
,
{
    "label": "s#2 ch#3 (N/A)",  "data": [[1421941072,23.9]]
}
]

请注意，data属性是一个数组数组。

当然，通过这种结构，每个数据系列只是一个数据点，但这是我能够解释您的问题的唯一方法。我假设以后的更新会为每个系列增加更多的分数。

您可能会在flot上找到有用的这一章。

Flot拒绝显示数据，但可以很好地解析JSON标签

1 个答案: