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

I am using the excellent jqPlot plug-in, and the only feature that I didn't find in the documentation is "how to color parts of background / grid with several different colors"

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

The x-axis units of my graphs are dates. I would like to highlight the weekend part (only) of the grid by changing the background grid color if it is possible.

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

Or anyone would have another idea?

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

Thanks

谢谢

EDIT WITH FINAL ANSWER

编辑最终答案

Based on the Boro's suggestion, I developed a better way to highlight a part of the background using the "line" option instead of "verticalLine" option. The fact is that with "verticalLine", developers must deal with the line width.So, it is difficult to obtain what you need because the width of the line spreads from the centre of the line and not from a border.

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

"Line" option permits to set a start and end points to set the exact part of the background to highlight. The width parameter is still used to display the line as a column, but it spread horizontally, not vertically.

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

About the "lineWidth" properties, the value is defined in pixel. Therefore, you can set the value with the graph container height to be sure and set the "y" value of the "start" and "end" properties with an average of your series data or an approximate middle range of your yaxis.

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

I updated the Boro's fiddle here

我在这里更新了Boro的小提琴

                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(),20],                                                
                                        lineWidth: 1000,
                                        color: 'rgba(255, 0, 0,0.45)',
                                        shadow: false,
                                        lineCap : 'butt'
                                    }
                                },                                    
                                {
                                    line:
                                    {
                                        start : [new Date('2012-01-13').getTime(),20],                                                
                                        stop : [new Date('2012-01-14').getTime(),20],                                                
                                        lineWidth: 1000,
                                        color: 'rgba(255, 0, 0,0.45)',
                                        shadow: false,
                                        lineCap : 'butt'
                                    }
                                }
                            ]
                }                    

1 个解决方案

#1

I think the sample shown by @Katya in the code under my answer to a related problem maight be helpful for you.

我认为@Katya在我对相关问题的回答中的代码中显示的示例可能对您有所帮助。

Direct link to the sample.

直接链接到样本。

EDIT

编辑

With regards to the second part you would need to use a verticalLine and set its x value as milliseconds, as presented here. Then you need to worry about selecting appropriate lineWidth.

关于第二部分，您需要使用verticalLine并将其x值设置为毫秒，如此处所示。然后你需要担心选择合适的lineWidth。