Jquery canvasOverlay动态分析JQPlot中的水平线和垂直线

我正在使用JQplot为公交车时刻表开发动态坡度平面图。 根据我的要求，除了绘制的图表外，我还想在图表上绘制一些虚线。为此，我静态地使用了水平线、垂直线和canvasOverlay线。 我想动态地画这些线。行数和所有必需的点将分别来自xml文件本身。 根据我的理解，canvasOverlay将水平线、垂直线和直线作为具有某些属性的数组对象。我想从动态创建的数组中传递这些对象，但我无法实现这些行。

---

非常感谢您为我的问题提供任何解决方案。

这里有一把小提琴来解释如何用

canvasOverlay

划清界限：

$.jqplot.tickNumberFormatter=函数（格式，val）{
if（typeof val==“number”）{
如果（val=“3.0”）{
返回字符串（“高”）；
}否则如果（val==“2.0”）{
返回字符串（“中”）；
}否则如果（val==“1.0”）{
返回字符串（“低”）；
}else返回字符串（“”）；
}否则{
返回字符串（val）；
}
};
buildReadinesGraph（）；
函数BuildReadinessGraph（）{
变量网格={
网格线宽度：1.5，
gridLineColor:“rgb（235235235）”，
drawGridlines：正确
};
风险值数据=[
['2012-09-13', 1],
['2012-10-22', 2],
['2012-01-12', 3]
];
$.jqplot.postDrawHooks.push（函数（）{
$（“.jqplot overlayCanvas canvas canvas”）.css（'z-index'，'0'）；//向后发送覆盖画布
$（“.jqplot系列画布”）.css（'z-index'，'1'）；//将系列画布发送到前端
$（“.jqplot高亮工具提示”）.css（'z-index'，'2'）；
$（“.jqplot事件画布”）.css（'z-index'，'5'）；//必须位于最上面，因为它负责事件捕获和传播
});
$.jqplot（'ChartDIV'，[data]{
系列：[{
showMarker：对
}],
系列默认值：{
showMarker：是的，
点标签：{
秀：真的
}
},
网格：网格，
荧光灯：{
大小：10，
秀：没错，
工具提示位置：“n”，
useAxesFormatters:true
},
选择：{
格式化字符串：“%d”
},
canvasOverlay：{
秀：没错，
对象：[{
行：{
开始：[新日期（'2012-05-01'）。getTime（），0]，
停止：[新日期（'2012-05-10'）。getTime（），0]，
线宽：1000，
颜色：“rgba（255,0,0,0.45）”，
影子：错，
线头：“屁股”
}
}
]
},
轴线：{
xaxis：{
标签：“日期”，
渲染器：$.jqplot.DateAxisRenderer，
渲染器选项：{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
选择：{
formatString:“%d/%m/%Y”，
角度：-30，
fontFamily：“Arial”，
fontSize:'13px'，
fontWeight:“粗体”
},
min:“01-01-2012”，
间隔时间：“2个月”，
标签选项：{
fontFamily：“Arial”，
字体大小：“14pt”，
fontWeight:'粗体'，
textColor:“#0070A3”
}
},
亚克斯：{
标签：“级别”，
labelRenderer:$.jqplot.CanvasAxisLabelRenderer，
选择：{
格式化程序：$.jqplot.tickNumberFormatter//我的格式化程序
},
渲染器选项：{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
标签选项：{
fontFamily：“Arial”，
字体大小：“14pt”，
fontWeight:'粗体'，
textColor:“#0070A3”，
角度：-90
}
}
}
});
};
这里有一把小提琴来解释如何用canvasOverlay画一条线

：

$.jqplot.tickNumberFormatter=函数（格式，val）{
if（typeof val==“number”）{
如果（val=“3.0”）{
返回字符串（“高”）；
}否则如果（val==“2.0”）{
返回字符串（“中”）；
}否则如果（val==“1.0”）{
返回字符串（“低”）；
}else返回字符串（“”）；
}否则{
返回字符串（val）；
}
};
buildReadinesGraph（）；
函数BuildReadinessGraph（）{
变量网格={
网格线宽度：1.5，
gridLineColor:“rgb（235235235）”，
drawGridlines：正确
};
风险值数据=[
['2012-09-13', 1],
['2012-10-22', 2],
['2012-01-12', 3]
];
$.jqplot.postDrawHooks.push（函数（）{
$（“.jqplot overlayCanvas canvas canvas”）.css（'z-index'，'0'）；//向后发送覆盖画布
$（“.jqplot系列画布”）.css（'z-index'，'1'）；//将系列画布发送到前端
$（“.jqplot高亮工具提示”）.css（'z-index'，'2'）；
$（“.jqplot事件画布”）.css（'z-index'，'5'）；//必须位于最上面，因为它负责事件捕获和传播
});
$.jqplot（'ChartDIV'，[data]{
系列：[{
showMarker：对
}],
系列默认值：{
showMarker：是的，
点标签：{
秀：真的
}
},
网格：网格，
荧光灯：{
大小：10，
秀：没错，
工具提示位置：“n”，
useAxesFormatters:true
},
选择：{
格式化字符串：“%d”
},
canvasOverlay：{
秀：没错，
对象：[{
行：{
开始：[新日期（'2012-05-01'）。getTime（），0]，
停止：[新日期（'2012-05-10'）。getTime（），0]，
线宽：1000，
颜色：“rgba（255,0,0,0.45）”，
影子：错，
线头：“屁股”
}
}
]
},
轴线：{
xaxis：{
标签：“日期”，
渲染器：$.jqplot.DateAxisRenderer，
渲染器选项：{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
选择：{
formatString:“%d/%m/%Y”，
角度：-30，
fontFamily：“Arial”，
fontSize:'13px'，
fontWeight:“粗体”
},
min:“01-01-2012”，