jqPlot -如何更改画布的不透明度或z索引?

I would like to show 3 color zones on my graph on the background according to y axis value, as I understand, I cannot control the background color by different colors.

我想根据y轴的值在我的背景图上显示3个颜色区域，我知道，我不能用不同的颜色来控制背景颜色。

My idea is to draw 3 horizontal lines with canvasOverlay - that is working. The problem is I want to place this lines behind my graph curve, now it seen on the front and it overlays my points line.

我的想法是画3条水平线和画布，这就是工作。问题是，我想把这条线放在我的曲线后面，现在它在前面，它覆盖了我的点线。

Can I change the property of z-index or the opacity?

我可以改变z指数的属性还是不透明度?

Maybe some other ideas?

也许一些其他想法?

  $.jqplot( 'ChartDIV', [data],
        {
            series: [{ showMarker: true}],
            highlighter: {
                sizeAdjust: 10,
                show: true,
                tooltipLocation: 'n',
                useAxesFormatters: true
            },

            tickOptions: {
                formatString: '%d'
            },
            canvasOverlay: {
                show: true,
                objects: [ 
                            {
                                horizontalLine: 
                                {      
                                    name: 'low', 
                                    y: 1.0,
                                    lineWidth: 100,
                                    color: 'rgb(255, 0, 0)',
                                    shadow: false 
                                }
                            },      
                            {
                                horizontalLine:
                                { 
                                    name: 'medium',
                                    y: 2.0,
                                    lineWidth: 100, 
                                    color: 'rgb(250, 250, 0)', 
                                    shadow: true 
                                }
                            },
                            {
                                 horizontalLine:
                                {
                                    name: 'high',
                                    y: 3.0,
                                    lineWidth: 100,
                                    color: 'rgb(145, 213, 67)',
                                    shadow: false
                                }
                             },  
                        ]       
                    },
            axes: {
                xaxis:
                {
                    label: 'Dates',
                    renderer: $.jqplot.DateAxisRenderer,
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    tickOptions: {
                        formatString: '%d/%m/%Y',
                        angle: -30,
                        fontFamily: 'Arial',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    },
                    min: d[0] + "/" + d[1] + "/01", 
                    tickInterval: '2 month',
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3'
                    }
                },
                yaxis:
                {
                    label: 'Level',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickOptions: {
                        formatter: $.jqplot.tickNumberFormatter
                    },
                    rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                    labelOptions: {
                        fontFamily: 'Arial',
                        fontSize: '14pt',
                        fontWeight: 'bold',
                        textColor: '#0070A3',
                        angle: -90
                    }

                }
            }
        } );

2 个解决方案

#1

I think that your problem might be the order in which you do your painting. I think that you first create the graph and then in it you draw this line, right?

我认为你的问题可能是你画的顺序。我认为你首先创建了图形然后在它里面你画了这条线，对吧?

Thus to sort out this you might try one of the hooks the jqPlot chart provides.

因此，为了解决这个问题，您可以尝试jqPlot图提供的一个钩子。

To see how you could use a hook, please see my other answer (BTW to my own question:) where I used a postDrawHooks hook to change format of labels once the graph is drawn. In your case you could use preDrawHooks or maybe more appropriate would be to use preDrawSeriesHooks, since I am not sure if a canvas is ready to use when function passed in preDrawHooks is called.

为了了解如何使用一个钩子，请查看我的另一个答案(我自己的问题:)，当图形被绘制时，我使用了postDrawHooks钩子来改变标签的格式。在您的情况下，您可以使用preDrawHooks，或者更合适的方法是使用predrawserieshook，因为我不确定在调用preDrawHooks的函数时是否可以使用canvas。

Remember that, according to the documentation, the preDrawSeriesHooks is called each time before a series is drawn, thus in your case you would need it to work just once.

请记住，根据文档，在绘制系列之前，每次都会调用predrawserieshook，因此在您的情况下，您需要它只工作一次。

EDIT

编辑

In this case the answer is simple, well you could do both, which is shown in my jsfiddle, available here.

在这种情况下，答案很简单，你可以同时做这两件事，这在我的jsfiddle中是可用的。

You need this piece of code to send overlay canvas to back, which you should place before the code painting your graph:

您需要这段代码来将覆盖画布发送回来，您应该在代码绘制您的图形之前放置它:

$.jqplot.postDrawHooks.push(function(){
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0');//send overlay canvas to back
    $(".jqplot-series-canvas").css('z-index', '1');//send series canvas to front
});

But when it comes to opacity you could apply it to whichever line you like (also shown in my code), using of the rgba() method, for series it is done this way:

但是，当涉及到不透明度时，您可以将它应用到您喜欢的任何一行(也显示在我的代码中)，使用rgba()方法，对于系列，它是这样做的:

seriesColors:['rgba(100, 150, 100, 0.75)']

for the lines on canvas, you do it like this:

对于画布上的线条，你可以这样做:

color: 'rgba(145, 213, 67, 0.25)'

---

EDIT2

EDIT2

The most important think was forgotten therefore with the previous code the highlighter was not working. Simply the event canvas which is responsible for event catching and propagation was hidden underneath our canvas. It was corrected in the current version of code, by setting of an appropriate z-index for it. The complete method would look like:

最重要的思想被遗忘了，因此，在前面的代码中，highlighter没有工作。简单地说，负责事件捕捉和传播的事件画布隐藏在我们的画布下面。在当前版本的代码中，通过设置适当的z索引来更正它。完整的方法是:

$.jqplot.postDrawHooks.push(function() {
    $(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back  
    $(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front         
    $(".jqplot-highlighter-tooltip").css('z-index', '2'); //make sure the tooltip is over the series
    $(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
});

---

EDIT3: A much nicer solution where we do not need to worry about setting the z-index.

EDIT3:一个更好的解决方案，我们不需要担心设置z索引。

$.jqplot.postDrawHooks.push(function() {
    var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0])
    var seriesCanvas = $($('.jqplot-series-canvas')[0])
    seriesCanvas.detach();
    overlayCanvas.after(seriesCanvas);
});

It is presented here. This solution is inspired by the answer provided by @Mark to a similar sort of problem.

这里提出了。这个解决方案的灵感来自于@Mark提供的类似的问题。

#2

A much better solution is to use Canvas rectangle object without any hacking http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html

一个更好的解决方案是使用Canvas矩形对象，而不使用任何黑客访问http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html。

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
      canvasOverlay: {
        show: true,
        objects: [
          { rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
          { rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
        ]
      } 
  });
});