jquery – jqPlot：如何用几种不同的颜色为背景/网格部分着色

我正在使用优秀的 jqPlot插件,我在 documentation中找不到的唯一功能是“如何为几种不同颜色的背景/网格部分着色”

我的图表的x轴单位是日期.如果可能的话,我想通过更改背景网格颜色来突出显示网格的周末部分(仅).

或者任何人都有另一个想法？

谢谢

编辑最终答案

根据Boro的建议,我开发了一种更好的方法来使用“line”选项而不是“verticalLine”选项突出显示背景的一部分.事实是,对于“verticalLine”,开发人员必须处理线宽.因此,很难获得您需要的东西,因为线的宽度从线的中心扩展而不是从边界扩散.

“Line” option允许设置起点和终点以设置要突出显示的背景的确切部分. width参数仍用于将行显示为列,但它是水平扩展而不是垂直扩展.

关于“lineWidth”属性,该值以像素定义.因此,您可以使用图形容器高度设置值,并将“开始”和“结束”属性的“y”值设置为系列数据的平均值或y轴的大致中间范围.

我更新了Boro的小提琴here

grid:                 
                {
                    drawGridLines: true,// wether to draw lines across the grid or not.
                    gridLineColor: '#cccccc',// Color of the grid lines.
                    backgroundColor: "#eee",borderColor: '#999999',// CSS color spec for border around grid.
                    borderWidth: 2.0,// pixel width of border around grid.
                    shadow: true,// draw a shadow for grid.
                    shadowAngle: 45,// angle of the shadow.  Clockwise from x axis.
                    shadowOffset: 1.5,// offset from the line of the shadow.
                    shadowWidth: 3,// width of the stroke for the shadow.
                    shadowDepth: 3,// Number of strokes to make when drawing shadow.
                                                // Each stroke offset by shadowOffset from the last.
                    shadowAlpha: 0.07,// Opacity of the shadow
                },canvasOverlay: {
                    show: true,objects:

                            [
                                {
                                    line:
                                    {
                                        start : [new Date('2012-01-12').getTime(),20],stop : [new Date('2012-01-13').getTime(),lineWidth: 1000,color: 'rgba(255,0.45)',shadow: false,lineCap : 'butt'
                                    }
                                },{
                                    line:
                                    {
                                        start : [new Date('2012-01-13').getTime(),stop : [new Date('2012-01-14').getTime(),lineCap : 'butt'
                                    }
                                }
                            ]
                }

解决方法

我认为@Katya在 my answer to a related problem下的代码中显示的示例可能对您有所帮助.

Direct link to the sample.

编辑

关于第二部分,您需要使用verticalLine并将其x值设置为毫秒,as presented here.然后,您需要担心选择合适的lineWidth.