jqPlot - 如何更改 canvasOverlay 的不透明度或 z-index？

Question

我想根据 y 轴值在背景图上显示 3 个颜色区域，据我了解，我无法通过不同颜色控制背景颜色。

我的想法是用 canvasOverlay 绘制 3 条水平线 - 这是有效的。
问题是我想把这条线放在我的图形曲线后面，现在它在前面看到，它覆盖了我的点线。

我可以更改 z-index 或不透明度的属性吗？

也许还有其他想法？

  $.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
                    }

                }
            }
        } );

Answer 1

我认为您的问题可能是您绘画的顺序。我认为您首先创建图表，然后在其中绘制这条线，对吗？

因此，要解决这个问题，您可以尝试其中一个 Hook jqPlot图表提供。

要了解如何使用钩子(Hook)，please see my other answer (顺便问一下我自己的问题:)我在哪里使用了 postDrawHooks绘制图形后， Hook 以更改标签的格式。在您的情况下，您可以使用 preDrawHooks或者更合适的是使用 preDrawSeriesHooks ，因为我不确定当函数传入 preDrawHooks 时是否可以使用 Canvas 叫做。

请记住，according to the documentation , preDrawSeriesHooks每次在绘制系列之前都会调用它，因此在您的情况下，您只需要它工作一次。

编辑

在这种情况下，答案很简单，你可以两者都做，这在我的 jsfiddle 中显示，available here .

您需要这段代码将覆盖 Canvas 发送到后面，您应该在绘制图形的代码之前放置它:

$.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
});

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

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

对于 Canvas 上的线条，您可以这样做:

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

编辑2

最重要的想法被遗忘了，因此在之前的代码中，荧光笔不起作用。只是负责事件捕获和传播的事件 Canvas 隐藏在我们的 Canvas 下面。在当前版本的代码中，通过设置适当的 z-index 进行了更正。为了它。完整的方法如下所示:

$.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:
一个更好的解决方案，我们无需担心设置 z-index .

$.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.这个解决方案是 inspired by the answer provided by @Mark类似的问题。