在 jquery 浮点图中，仅突出显示一条特定的网格线

【问题标题】：In jquery flot chart, highlight only one particular grid line在 jquery 浮点图中，仅突出显示一条特定的网格线
【发布时间】：2013-08-27 12:43:53
【问题描述】：

我正在使用 jquery 浮点图来创建折线图。我无法弄清楚的是如何改变任何一条特定网格线的颜色。整个事情 - 图表显示传感器读数。共有 4 种不同的读数，例如 - 非常低、低、高、非常高。我想突出显示与这四个阈值对应的网格线。我还提供了一个关于我真正想做的事情的虚拟图像--

This is the dummy I want to display

这张图片中的黑线是那条特定线的网格颜色（抱歉我画得不好）。提前致谢

【问题讨论】：

标签： javascript jquery flot

【解决方案1】：

您可以像这样使用网格属性markings 来做到这一点：

$.plot("#YourPlotDiv", YourPlotSeries, {
    grid: {
        markings: [{ color: "#FFFF00", lineWidth: 1, yaxis: { from: 186, to: 186} },
                   { color: "#FF0000", lineWidth: 1, yaxis: { from: 191, to: 191} }]
    },
    ... further properties ...
});

在此示例中，您标记了 2 条网格线，分别位于 186 和 191。如果 from 和 to 不同，并且您将删除 lineWidth 属性，那么您将标记一个区域。

这是一个令人担忧的小提琴：http://jsfiddle.net/uyPxZ/

【讨论】：

如果你想标记一个区域，你也可以为每个标记提供一个xaxis: {...} 选项（这比仅仅改变区域的大小提供了更多的控制），但不选择这个选项会使线延伸到整个地块。