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

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中则不能。有什么建议么？

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

感谢您的所有帮助。

最佳答案

删除“ stroke-linecap”和/或“ stroke-linejoin”。

关于javascript - 折线图在其中绘制垂直虚线和圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26582809/