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

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

我的图表的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' } } ] } 

Answer 1

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

直接链接到样本。

编辑

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