5

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

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

或者有人会有其他想法吗?

谢谢

编辑最终答案

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

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

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

我在这里更新了 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'
                                    }
                                }
                            ]
                }                    

结果样本

4

1 回答 1

4

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

直接链接到示例。

编辑

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

于 2012-06-11T12:39:01.457 回答