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

Question

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

jqplot

5

我想在我的图表背景上根据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
                    }

                }
            }
        } );

- Katya

我不确定你应该在哪里以及如何绘制它，提供一个代码示例会很有帮助。你能否提供一个，最好是在 http://jsfiddle.net/ 上？ - Boro

请查看我的编辑。我建议您将来使用jsfiddle而不是仅使用代码片段。这可以节省回答者和您的时间，并确保回答者准确地了解您的问题所在。在这个问题中，我不得不添加我的数据等，还不得不删除其中一些内容。 - Boro

顺便问一下，在“tickOptions”中，“formatter：$.jqplot.tickNumberFormatter”是什么？我从未见过这个，也在网上找不到相关信息。另外，由于它是一个类，所以它的第一个字母可能需要大写。它属于哪个插件？ - Boro

对不起，我忘记了 - 这是我自己的y轴格式化程序。谢谢你提供jsfiddle - 我之前不知道它。 - Katya

2个回答

1

一种更好的解决方案是使用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" } }
        ]
      } 
  });
});

- devXen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Boro · Accepted Answer

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

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

要了解如何使用钩子，请参阅我的另一个答案（顺便说一句，这是回答我的问题：），我在其中使用了 postDrawHooks 钩子，在图表绘制完成后更改标签格式。在你的情况下，你可以使用 preDrawHooks 或者更适合的可能是使用 preDrawSeriesHooks，因为我不确定在调用传递给 preDrawHooks 函数时画布是否已经准备好使用。

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

编辑

在这种情况下，答案很简单，你可以做两件事，这在我的jsfiddle中展示了，点击此处。

你需要这段代码将覆盖画布发送到后面，在绘制图形的代码之前放置它：

$.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)']

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

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

编辑2

最重要的事情被遗忘了，因此在先前的代码中，高亮器无法工作。简单地说，负责事件捕获和传播的事件画布被隐藏在我们的画布下面。在当前版本的代码中进行了更正，通过为其设置适当的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
});

编辑3：一种更好的解决方案，我们不需要担心设置z-index。

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

这里呈现。这个解决方案是受到@Mark提供的答案类似问题的启发。