Question

我正在尝试使用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);
            });
        }
    });   
}

consoleGet_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]]}
]

enter image description here

Answer 1

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

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);
        }
    });   
}

Answer 2

不是一个一个地传递data个参数（顺便说一下，它会覆盖以前的图），你可以一次绘制所有内容。我现在明白你要迭代才能得到合适的颜色，但你现在这样做的方式与flot的默认方式没什么不同。

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

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

使用整数时，使用flot生成的颜色。这是实际绘图过程的small fiddle。在那里，我使用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);
        }   
    });   
}

Answer 3

适用于我的解决方案是：

<强> serverAjaxPage.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
       }
   ]';

（来自Multiple Axes example的数据）

<强> clientPage.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);

});

使用ajax使用flot绘制多个数据集 - 数据未正确显示

3 个答案: