如何訪問和設計G中的單個行。Raphael折線圖

由於raphael JS庫很差，我懇求集體智慧。如何訪問和設計G中的單個行。Raphael折線圖

我有一個工作g。聖拉斐爾多線線圖（類似於http://g.raphaeljs.com/linechart.html）

類似： VAR應用於LineChart = rglinechart（10,10,300,220，[1,2,3,4,5]，[[10,20,15,35 ，30]，[5,10,5,15,20]]，{shade：true，「colors」：[「＃44F」，「＃CCC」]，nostroke：true}）;

我想改變設置填充=清晰，行程線路之一=顏色

有人告訴我，像這樣的工作，但沒有運氣 - 任何建議嗎？ lineChart.lines [0] .attr（{stroke：「＃000」}），

額外的功勞，我怎樣才能設置一個行的漸變到一個漸變？

謝謝！

來源

2011-01-05 breuklyner

矢量圖形的Raphael JS庫非常有據可查。 gRaphael圖表繪圖庫尚未被作者記錄。 – 2012-05-25 03:16:23

我用螢火蟲和執行console.log（）列出某一行上的屬性：

console.log(chart.lines[0].attr());

我的日誌行點擊查看詳情，如：

fill: "none" 
path: [ ... ] 
stroke: "#ff0000" 
stroke-dasharray: "" 
stroke-linecap: "round" 
stroke-linejoin: "round" 
stroke-width: 2 
transform: []

對我來說，我想改變筆畫寬度。此代碼的工作：

chart.lines[0].attr({'stroke-width': 8});

的line-width屬性在the excellent RaphaelJS documentation上市。

對於你的問題，我想你需要這樣的代碼：

chart.lines[0].attr({'fill': 'none', 'stroke': '#FF00FF'});

我希望這有助於！

來源

2012-05-25 03:33:06

我還沒有使用Raphäel，但你應該能夠將填充設置爲透明併爲筆畫設置顏色。如果SVG元素有一個ID或類，那麼你應該能夠通過CSS設置此：

#id { 
    stroke: colour; 
    fill: none; 
}

否則，你可以使用path:nth-of-type()選擇元素，或選擇元素，就像您任何其他的JS和設置筆觸和填充屬性。

您在上面的代碼中有nostroke: true。我不確定這是否會阻止它按預期工作。

要設置漸變（至少在實際的SVG中），請將fill屬性的值設置爲指向id的url。然後您創建一個帶有該ID的linearGradient元素。請參閱this example如何編寫漸變。您也可以在SVG中將筆畫的值設置爲漸變。

來源

2011-01-09 20:29:14

感謝您的指點！問題不在於SVG，而是這個特定的庫 – breuklyner 2011-01-10 18:59:42

肯尼沉建議

lineChart.lines[0].attr({"stroke": "#000"})

來源

2011-01-19 21:55:38 breuklyner

這裏有一些事情我發現通過試驗和錯誤。將更新，因爲我發現更多。正如你所說，如果gRaphael真的有像真正的項目一樣的文件，它會好得多......雖然它似乎最近已經被移交了，所以希望事情會改變。

要訪問線折線圖的：lineChart.lines
- 訪問一組路徑中的物體的，每行一個
要訪問符號標記數據點（或如果沒有，則爲空數組）：lineChart.symbols
- 訪問一組集合，每個集合包含一行符號
要訪問軸線：lineChart.axis
- 訪問一組路徑，一個用於每個軸線。看起來每個座標軸都是一條路徑，並且在路徑上有刻度線作爲轉向。要訪問單個軸，它們位於same order as how you set which axis are visible (top, right, bottom, left)中，但只能設置多少個軸。因此，如果您有底部X和左側Y（{axis: "0 0 1 1"}），則axis[0]將爲X軸，而axis[1]爲Y.如果您有左側，底部和右側，則右側將爲axis[0]，底部爲axis[1]，左側爲axis[2]，等
要訪問軸文本標籤：lineChart.axis[n].text（其中n是數字，如上述，軸的要）
- 訪問一組文本聖拉斐爾對象。爲了對軸線和文本進行相同的更改，您似乎需要分別訪問兩個集合。

來源

2012-03-12 14:54:48 user568458

如何訪問和設計G中的單個行。Raphael折線圖

回答

相關問題