Question

刚开始首次使用flot.js并遇到一些问题/疑问。图表显示精细减去了一些困扰我的事情。

1 - 蜱和日期似乎没有正确排列。例如，在我正在处理的当前图表中，两个不同日期只有两个条目。由于某种原因，实际数据值（点）不高于它对应的日期。请参阅此处的图片 example chart

2 - 有没有办法让y轴大于数据集，以防止线条与图例重叠？在这个例子中它很好，但我已经看到了其他数据与图例重叠的地方。

3 - 如何处理没有数据？我计划对此进行扩展，以允许用户选择开始/结束日期...所以如果没有结果，有一个很好的方法来返回这个和/或可能在图表中显示一条消息？这里最重要的是当没有数据时脚本不会中断。

JS：

//get the data
$.ajax({
    url: "/process/chart_main.php",
    type: "POST",
    dataType: "json",
    success: onDataReceived
});

function onDataReceived(series) {

    console.log(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,
                lineWidth: 2,
                fill: true,
                fillColor: {
                    colors: [{
                            opacity: 0.05
                        }, {
                            opacity: 0.01
                        }
                    ]
                }
            },
            points: {
                show: true
            },
            shadowSize: 2
        },
        grid: {
            hoverable: true,
            clickable: true,
            tickColor: "#eee",
            borderWidth: 0
        },
        //colors: ["#d12610", "#37b7f3", "#52e136"],
        xaxis: {
            tickSize: [1, "day"],
            mode: "time",
            timeformat: "%m-%d-%Y"
        },
        yaxes: [{
            position: "left"
        }],
        legend: {
            position: "ne"
        }
    };

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

PHP：

//actual select removed for this display
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

if($results)
{
    foreach($results as $row)
    {
        $data1[] = array( strtotime($row['date']) * 1000, $row['day_count'] );
    }

    //send our data values to $mergedData, add in your custom label and color
    $mergedData[] =  array('label' => "Events" , 'data' => $data1, 'color' => '#37b7f3');
}

// return result array to ajax
echo json_encode($mergedData);

Answer 1

可能是午夜时间（07-09-2014 00:00:00），而数据点则不是。如果你想将它们排成一行，请从数据点中删除时间，或者将数据点与数据点相同的时间作为数组而不是tickSize选项（see here），你必须给出刻度线作为数据点中的时间戳）：
```
xaxis: {
    ticks: [1405942268798, 1405942368798, ...]
}
```
对轴选项使用min和max属性（请参阅上面的相同链接）：
```
xaxis: {
    min: 1405942268798,
    max: 1405942368798
}
```
当没有数据时，flot不会“中断”，它只显示一个空图表。如果您想显示其他消息，可以在致电$.plot()之前自行检查：
```
if (data.length == 0) {
    alert('No data');
}
```

flot.js - 点与x轴，空数据集，图例重叠不匹配

1 个答案: