标记图-用于定义不同范围的图形内容的自定义着色

Question

我在图上有两个区域，也就是所谓的绿色和红色区域。你可以在小提琴上看到它。我接下来要做的是有一个图，其中绿色范围应该在2-4 (y-轴)之间，特别是对于x轴的11-13值。基本上，我想有两个不同的范围。

有人知道怎么做吗？

编辑:

为了更清楚地说明Michel的解决方案，我基本上想添加另一个绿色区域，它位于以前所在的绿色区域的右侧(让它位于x(13,16)和y(4,6)中)。

 Please check the newer version ; 

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

Answer 1

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

要么创建一个新文件并复制粘贴其中的内容，要么下载插件。

引用它就像所有其他javascript文件一样。

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

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

你在正确的轨道上！

Flot绘制图表标记的方式只是重叠所有的东西！一层接一层。

为此，我做了以下工作：

#1:第一次画了green区域的x=11和x=13之间的xaxis。这是一个巨大的区域，从y=0一直延伸到yaxis上的y=12。

#2:然后在y=0和y=2之间填写了整个yaxis，这与yaxis上的绿色区域重叠，创建了一个从left(x=10)到right(x=15)的red区域。

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

#4: I现在左边有两个白色区域，位于green区域的左侧和右侧，以及red区域之间。我所要做的就是用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
        }] 
....

这里有一个更新的小提琴，我认为它非常接近您的期望。

​

​