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中。有什麼建議麼?
除此之外,我想繪製圓中心文本的內部,對齊圖下方的這些垂直線。任何想法如何能夠實現?
感謝您的幫助。
是啊像魅力工作:-) – Nits 2014-10-31 07:32:18
*刪除「stroke-linecap」解決了我的問題 – Nits 2014-10-31 07:48:13