Flot Chart - 图形内容的自定义着色以定义不同的范围

Question

我在图表上有 2 个范围，所谓的；绿色和红色区域。您可以在 fiddle 中看到它。我想要的是有一个图表，其中绿色范围应该在 2-4（y 轴）之间，特别是 x 轴的 11-13 值。基本上我想要 2 个不同的范围。

有人知道怎么做吗？

编辑：

为了让米歇尔的解决方案更清楚；我基本上想添加另一个绿色区域，它位于先前位于绿色区域的右上方（让它位于 x(13,16) 和 y(4,6) ）。

 Please check the newer version ;

http://jsfiddle.net/shamaleyte/4zmgrpwz/

Answer 1

我已经为 Flot 创建了一个简单的插件，以便让 shamaleyte 获得他想要的结果。

要么创建一个新文件并将内容复制粘贴到其中，要么下载 plugin

像其他每个 javascript 文件一样引用它

<script type="text/javascript" src="path/to/file.js"></script>

并将areaMarkings添加到选项中的grid对象。

你走对了！

Flot绘制图表标记的方式就是将所有内容重叠！层层叠叠。

我为完成它所做的工作如下：

#1: 首先我在 x=11 和 x=13 之间为 green 区域绘制了 xaxis。这是一个巨大的区域，从 y=0 一直到 yaxis 上的 y=12。

#2:然后我把y=0和y=2之间的整个yaxis填满了，这就和[=上的绿色区域重叠了=22=] 创建一个从 left(x=10) 到 right(x=15)

的 red 区域

#3: 底部 yaxis 行现在是红色的，然后我对顶部 yaxis 做了完全相同的操作。再次从 left(x=10) 到 right(x=15) 我用 red 区域填充了整个 y=4 到 y=12。

#4: 我现在在 green 区域的左侧和右侧以及 red 区域之间留下了 2 个白色区域。我所要做的就是用 red 填充它们。我对绿色区域做了同样的操作，从底部到顶部绘制 red 区域。从 x=0 到 x=2 和从 x=13 到 x=15.

....
markings: [{
            xaxis: {
                from: 11,
                to: 13
            },
            color: "#D7EEE1" // Green
        }, {
            yaxis: {
                from: 0,
                to: 2
            },
            color: "#F2CDEA" // Red - Bottom Row
        }, {
            yaxis: {
                from: 4,
                to: 12
            },
            color: "#F2CDEA" // Red - Top Row
        }, {
            xaxis: {
                from: 10,
                to: 11
            },
            color: "#F2CDEA" // Red - Left Column
        },{
            xaxis: {
                from: 13,
                to: 15
            },
            color: "#F2CDEA" // Red - Right Column
        }] 
....

这是更新后的 fiddle，我认为它接近您的期望。

Flot Chart - 图形内容的自定义着色以定义不同的范围

Flot Chart - Custom coloring of the graphic content for defining different ranges

customization

colors

range

flot