Flot：在网格和右侧背景上添加垂直线

Question

我昨天发现了Flot，我很好奇是否可以在图表中添加一条垂直线该行的右侧有不同的背景。

这是我到目前为止的图表： http://jsfiddle.net/cncvL/1/ （从 Flot 示例演变而来）

现在，我通过在 y 轴上添加数据来添加一条额外的线，但这不是理想的解决方案。

Answer 1

您可以使用“网格”属性的“标记”属性来使线条两侧具有不同的颜色。例如，编辑您的 JSFIDDLE 说：

    grid: {
        backgroundColor:
        {
            colors: ["#FFF", "#DDD"]
        },
        markings: [
            {xaxis: {from:  1, to: 10}, yaxis: {from: -3, to: 12}, color: "#eeeeff"},
            {xaxis: {from: 10, to: 14}, yaxis: {from: -3, to: 12}, color: "#eeffee"},
            {xaxis: {from: 10, to: 10},                            color: "#0000bb"}
        ]
    },

您还可以使用它在上面的第三个“xaxis”上绘制一条简单的线，而不是像您那样做（另一个系列）。