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

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... 最多重复 6 个值。

图表仅针对前六个值绘制。并且当这些值第二次重复时，图形再次从后向绘制。谁能告诉我如何依次显示所有 12 个 X 轴点。

Answer 1

我没有用过Flot，希望我的建议对你有所启发。

在处理 JSON 时，按照 Flot example 所示格式化您的数据（检查任何 [查看数据] link）：

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

我猜你已经知道如何转换你的时间序列来绘制你的图表，还有一件事要做的是在重复时间 2:56 之前添加 null。这个技巧用于绘制 basic usage.

中的红线

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

If a null is specified as a point or if one of the coordinates is null or couldn't be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a line segment end, i.e. the points before and after the null value are not connected. Reference here.

Answer 2

不是完美的解决方案。但是 Space 被添加在重复时间值的末尾。这是修改后的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]
    ]
}

自从我添加了 space，这两个值就不一样了。但它会在图表中显示相同

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

Flot.js repetitive X axis values not showing

javascript

json

html

canvas

flot