6

我正在使用 flot 试图绘制一些数据。我使用单个数据集进行此操作，当我尝试修改代码以使用多个数据集时，我遇到了一个错误，我很难追踪它并且它停止工作。我确信这是我所做的改变，但对于我的生活，我无法追踪它。

Y 轴显示 -1.0、-0.5、0、0.5 和 1.0 - 几乎不是我期望的值，也没有 X 轴数据。图表显示为空白。

我正在尝试完成类似于 StackOverflow 上的信誉图的事情，但这将代表不同的数值。该data对的第一个值是时间戳（我认为我计算正确），第二个值data是要绘制的值。

我确保我的价值观没有引号，我看到这是最常见的问题之一。

任何指出问题的反馈或帮助将不胜感激。

stats.js

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            var i = 0;
            console.log(datasets);
            $.each(datasets, function(key, val){
                val.color=i;
                i++;

                var data = [ $(this) ];
                console.log(data);

                var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: {mode: 'time', timeformat: "%y/%m/%d", tickDecimals: 0, tickSize: 1 }
                };

                var placeholder = $("#placeholder");

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

控制台Get_stats.php

<?php
    //simplified for example purposes
    $fields=explode(",",$_REQUEST['field']);

    foreach ($fields as $field){
        $rows=$dbConnect->getRows('select date, ' .$field. ' from websiteStats order by id asc');
        $resultData = array('label' => $field);
        foreach($rows as $row){
            $t = strtotime($row['date']." UTC") * 1000;
            $resultData['data'][]=array($t, (int)$row[$field]);
        }
        $results[]=$resultData;
    }
    die(Json_encode($results));
?>

控制台输出

[Object { label="activeUsers", data=[6]}, Object { label="totalUsers", data=[6]}]
[[Object { label="activeUsers", data=[6], color=0}]]
[[Object { label="totalUsers", data=[6], color=1}]]

从 firebug 返回 json（为此帖子添加了格式）

[
    {"label":"activeUsers","data":[[1334583090000,26],[1334669491000,26],[1334755893000,26],[1334842290000,26],[1334928691000,26],[1335015093000,26]]},
    {"label":"totalUsers","data":[[1334583090000,150],[1334669491000,170],[1334755893000,193],[1334842290000,200],[1334928691000,225],[1335015093000,257]]}
]

在此处输入图像描述

4

3 回答 3

4

我能够通过将代码更改为更简化来解决问题：

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            $.plot($("#placeholder"), datasets);
        }
    });   
}
于 2012-05-21T14:16:59.733 回答
2

data您可以一次绘制所有内容，而不是逐个传递参数（顺便说一句，这会覆盖前面的图）。我现在明白你通过迭代来获得合适的颜色，但是你现在做的方式与 flot 的默认方式没有什么不同。

如果您想要其他颜色，您可以在系列数据中将它们指定为：

{
    "label":"activeUsers",
    "data": xxx,
    "color": 1 // Or e.g. "rgb(255,0,0)"
}

使用整数时，您使用 flot 生成的颜色。这是实际绘图过程的一小部分。在那里我minTickSize: [1, "day"]用来指定每个刻度应该代表一天。

这应该能够与 ajax 一起使用：

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            var options = {
                lines: { show: true },
                points: { show: true },
                xaxis: {
                    mode: 'time', 
                    timeformat: "%y/%m/%d",
                    minTickSize: [1, "day"]
                }
            }
            var placeholder = $("#placeholder");
            $.plot(placeholder, datasets, options);
        }   
    });   
}
于 2012-05-21T14:31:30.400 回答
0

适合我的解决方案是：

服务器AjaxPage.php

<?php
echo '[
       {
           "data": [
               [
                   1220565600000,
                   106.23
               ],
               [
                   1220824800000,
                   106.34
               ]
           ],
           "label": "Oil price ($)"
       },
       {
           "data": [
               [
                   1167606000000,
                   0.758
               ],
               [
                   1167692400000,
                   0.758
               ],
               [
                   1167778800000,
                   0.7547
               ]
           ],
           "label": "USD/EUR exchange rate",
           "yaxis": 2
       }
   ]';

（来自多轴示例的数据）

客户端页面.html

$(function () {

    //Fetch data with AJAX
    function fetchData() {

        // Normally we call the same URL - a script connected to a
        // database - but in this case we only have static example
        // files, so we need to modify the URL.

        $.ajax({
            url: "/serverAjaxPage.php",
            type: "GET",
            dataType: "json",
            success: onDataReceived
        });


        function onDataReceived(series) {

            // Load all the data in one pass; if we only got partial
            // data we could merge it with what we already have.
            data = series;

            var options = {
                series: {
                    lines: {
                        show: true,
                    },
                    points: {
                        show: false
                    }
                },
                xaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    mode: "time",
                    timeformat: "%d-%m-%Y"
                },
                yaxes: [{
                    position: "left"
                }],
                legend: {
                    position: "sw"
                }
            };



            $.plot("#placeholder", data, options);
        }
    }
    //If you want to load data every 10 seconds
    var interval = 10000;

    //Set interval operation
    var tid = setInterval(fetchData, interval);

});
于 2013-11-02T02:10:04.507 回答