有什麼方法可以將網格線添加到gRaphael折線圖中？

Question

我有我用gRaphael創建的折線圖。它有軸和刻度線，但我想要網格線。有沒有內置的方式來實現這一點或添加圖書館，可以幫助我？

Answer 1

我昨天試過這個。簡而言之：gRaphaël無法爲您提供任何折線圖選項或軸選項，您必須自己動手做Raphaël。
喜歡的東西：

var r = Raphael("holder"), txtattr = { font: "12px sans-serif" }; 
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5'); 
r.linechart(10, 10, 300, 220, x, [y, y2, y3]); 

這意味着我的線型圖下支取從15,200.5開始並繪製直線310,200.5移動到15,180.5和畫線，以310,180.5的路徑。不要問我爲什麼，但.5對於讓中風實際上是1px寬而且是純黑色很重要。否則，它似乎在50％不透明度下變爲2px寬。您必須自己計算您的折線圖的確切位置。

您還可以使用playground中的path功能，將r更改爲paper。

如果您在尋找諸如定義軸的確切範圍（而不僅僅是輸入的最小值和最大值）的事情，您可能還會考慮查看Google Chart Tools。

Answer 2

gRaphael沒有添加網格線的內置方法，但通過編輯源代碼或在創建它之後操作圖形對象，繪製它們非常容易。

我發現了一個名爲RaphAlytics的擴展名，並在需要網格邊界框的情況下使用它的drawGrid()函數。

您可以根據需要爲任何gRaphael圖形調整此函數以繪製網格線。上的線圖，我需要繪製用的線圖上的左軸標記對準水平網格線，所以就用該功能的這樣的示例：

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

這裏的一個工作撥弄，以說明示例：http://jsfiddle.net/KM3BB/1/