我正在使用优秀的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'
}
}
]
}