Question

我正在使用flot.js来显示图表。以下JSON用于显示下面附带的图表。

{
    "data": [
        ["02:56", 50],
        ["06:56", 120],
        ["10:56", 170],
        ["14:56", 210],
        ["18:56", 260],
        ["22:56", 300],
        ["02:56", 380],
        ["06:56", 420],
        ["10:56", 460],
        ["14:56", 500],
        ["18:56", 570],
        ["22:56", 700]
    ]
}

以上JSON仅适用于蓝色线条。请注意，第二次重复X轴时间值02：26,06：26 ......最多六个值。

该图表仅针对前六个值绘制。当第二次重复这些值时，将从后面再次绘制图形。有没有人请告诉我如何连续显示所有12个X轴点。

Answer 1

我之前没有使用Flot，但我希望我的建议可以启发你。

在处理JSON时，按照此Flot example格式化数据（查看任何[查看数据]链接）：

{
    "data": [[02:56, 50], [06:56, 120], [10:56, 170], ... ]
}

我想您已经知道如何转换时间序列以绘制图表，还有一件事是在重复时间null之前添加2:56。此技巧用于绘制basic usage中的红线。

{
    "data": [[02:56, 50], [06:56, 120], [10:56, 170], ..., null, [02:56, 380], [06:56, 420] ... ]
}

如果将null指定为点或其中一个坐标为null 或者无法转换为数字，当忽略该点时画画。作为一种特殊情况，行的空值被解释为a 线段结束，即空值之前和之后的点未连接。 Reference here.

Answer 2

不是一个完美的解决方案。但是在重复时间值的末尾添加了空格。这是修改过的JSON。它工作正常。

{
    "data": [
        ["02:56", 50],
        ["06:56", 120],
        ["10:56", 170],
        ["14:56", 210],
        ["18:56", 260],
        ["22:56", 300],
        ["02:56 ", 380],
        ["06:56 ", 420],
        ["10:56 ", 460],
        ["14:56 ", 500],
        ["18:56 ", 570],
        ["22:56 ", 700]
    ]
}

由于我添加了空间，因此两个值都不相同。但它会在图表中显示相同的内容

Flot.js重复的X轴值未显示

2 个答案: