javascript - 在其中绘制垂直虚线和圆圈的折线图

Question

http://jsfiddle.net/ub69o0xw/7/

 jQuery(function ($) {

 var r = Raphael("graph", 303, 118);
 var lines = r.linechart(0, 0, 303, 126, [
     [0, 1, 2, 3, 4, 5, 6]
 ], [
     [1, 2, 3, 7, 4, 5, 4]
 ], {
     nostroke: false,
     axis: "0 0 1 1",
     axisxstep: 4,
     axisystep: 7,
     colors: ['#fff'],
     symbol: "circle",
     smooth: false,
     shade: true
 }).hoverColumn(function () {

 }, function () {
     this.tags && this.tags.remove();
 });

 var w = 300;
 var h = 122;
 x = 0;
 y = 0;
 // Draw horizontal lines
 for (var i = 0; i < lines.axis[1].text.items.length; i++) {
     r.path(['M', x, lines.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
         stroke: '#ccc'
     }).toBack();
 }
 lines.axis.hide();

 var i = 1;
 $("#graph svg circle").each(function () {
     rect_x = $(this).attr("cx");
     if (i >= 1) {
         r.path(['M', rect_x, 1, 'V', 114]).attr({
             "stroke-dasharray": ".",
             "stroke-width": "2.8",
             "stroke": "#818e8f",
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             "stroke-miterlimit": "2",
             "stroke-opacity": "0.5"
         }).toBack();
     }
     i++;
 });
});

我创建了这个折线图，其中有垂直的虚线穿过绘制的坐标。

这段代码在 mozilla 和 safari 中运行良好，但在 chrome 中则不行。有什么建议吗？

除此之外，我想绘制其中包含居中文本的圆圈，并与图表下方的这些垂直线对齐。知道如何实现这一点吗？

感谢您的帮助。

Answer 1

删除“描边线帽”和/或“描边线连接”。