jqPlot-如何更改canvasOverlay的不透明度或z索引? [英] jqPlot - How to change opacity or z-index of canvasOverlay?
问题描述
我想根据y轴值在图形上的背景上显示3个颜色区域，据我所知，我无法用不同的颜色控制背景颜色.
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.
我的想法是使用canvasOverlay绘制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.
我可以更改z-index或不透明度的属性吗?
Can I change the property of z-index or the opacity?
也许还有其他想法吗?
$.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
}
}
}
} );
推荐答案
我认为您的问题可能是您绘画的顺序.我认为您首先创建图形，然后在其中绘制这条线，对吗?
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?
因此，为了解决这个问题，您可以尝试使用jqPlot图表提供的挂钩之一.
Thus to sort out this you might try one of the hooks the jqPlot chart provides.
要查看如何使用钩子，请请参阅我的其他答案(顺便问一下我自己的问题:)绘制图形后，我使用了postDrawHooks钩子来更改标签的格式.在您的情况下，可以使用preDrawHooks，或者更合适的方法是使用preDrawSeriesHooks，因为我不确定在调用preDrawHooks中传递的函数时画布是否准备就绪.
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.
请记住，根据文档 ，每次绘制系列之前都会调用preDrawSeriesHooks，因此，在您的情况下，您只需要使它工作一次即可.
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.
编辑
在这种情况下，答案很简单，您可以两者都做，这在我的jsfiddle中显示，可用这里.
In this case the answer is simple, well you could do both, which is shown in my jsfiddle, available here.
您需要这段代码来将覆盖画布发送回，应该将其放置在绘制图形的代码之前:
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
});
但是，当涉及到不透明度时，您可以使用rgba()方法将其应用于您喜欢的任何行(也显示在我的代码中)，对于系列来说，可以这样进行:
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:
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
最重要的想法被遗忘了，因此在以前的代码中荧光笔无法正常工作.只是将负责事件捕获和传播的事件画布隐藏在我们的画布下方.通过为它设置适当的z-index在当前版本的代码中对其进行了更正.完整的方法如下所示:
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:
$.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
});
一个更好的解决方案，我们无需担心设置z-index.
A much nicer solution where we do not need to worry about setting the z-index.
$.jqplot.postDrawHooks.push(function() {
var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0])
var seriesCanvas = $($('.jqplot-series-canvas')[0])
seriesCanvas.detach();
overlayCanvas.after(seriesCanvas);
});
