2014-10-27 83 views
0

http://jsfiddle.net/ub69o0xw/7/應用於LineChart圖形繪製內它

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++; 
}); 
}); 

我已經創建,其具有垂直虛線交叉的繪製座標此應用於LineChart圖表垂直虛線和圓形。

此代碼在Mozilla和Safari瀏覽器中正常工作,但不在Chrome中。有什麼建議麼?

除此之外,我想繪製圓中心文本的內部,對齊圖下方的這些垂直線。任何想法如何能夠實現?

感謝您的幫助。

回答

1

刪除「stroke-linecap」和/或「stroke-linejoin」。

+0

是啊像魅力工作:-) – Nits 2014-10-31 07:32:18

+0

*刪除「stroke-linecap」解決了我的問題 – Nits 2014-10-31 07:48:13