Question

我在图表上有2个范围，所以叫做;绿色和红色区域。你可以在小提琴中看到它。我想要的是有一个图表，其中绿色范围应该在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创建了一个简单的插件，以便让shamaleyte得到他想要的结果。

创建新文件并复制粘贴其中的内容或下载plugin

将其称为其他所有javascript文件

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

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

你走在正确的轨道上！

Flot绘制图表标记的方式只是重叠一切！层层叠加。

我为实现这一目标所做的工作如下：

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

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

＃3：现在底部yaxis行为红色，然后我对顶部yaxis执行了相同的操作。再次从left(x=10)到right(x=15)，我填写了整个y=4到y=12，其中red区域。

＃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。

enter image description here

Flot Chart - 用于定义不同范围的图形内容的自定义颜色

1 个答案: