如何添加軸標籤和網格到拉斐爾條形圖

我有g.raphael條形圖的問題。這是我的例子如何添加軸標籤和網格到拉斐爾條形圖

var paper = Raphael("holder"); 
 
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26,36,55,60,80]]); 
 
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper); 
 
//paper.path("M100 40L100 320").attr({ stroke: '#ccc' }); 
 
\t 
 
var paper = Raphael("holder1"); 
 
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26]]); 
 
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/raphael-min.js"></script> 
 
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.raphael-min.js"></script> 
 
<script src="https://raphael4gwt.googlecode.com/svn/trunk/raphael4gwt/src/org/sgx/raphael4gwt/public-graphael/graphael/g.bar.js"></script> 
 

 
<html> 
 
    <body> 
 
<div id="holder"></div> 
 
<br/> 
 
<div id="holder1"></div> 
 
    </body> 
 
</html>

問題：

如何從酒吧停止變得越來越大？第一個例子有6個小節，第二個小節有3個小節，所以在第二個例子中，一切都比較大，所以它與y軸上的標籤不匹配。
如何將網格線添加到條形圖？我嘗試繪製它與路徑元素，但它不會對齊，因爲酒吧變得越來越大，與傳遞值相比。

感謝韋達

來源

2014-09-19 Zeus

我知道這是一個幾個月大的，希望我的回答可以幫助你或別人的未來。

因此，導致這些問題的一些事情正在發生。當您調用paper.barchart時，條形圖會在x和y兩者中縮放以填充圖表所給出的可用高度和寬度。所以抵消這種情況的一種方法是傳遞虛擬0值，以使條寬相同。

對於高度縮放，您需要設置條形圖的「to」選項，以便將條形圖繪製爲適當的值。

看看這個plunker我做了顯示你的數據。這裏的圖表創建調用之一：
```
var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]], 
    { 
     to: 100 
    }); 
```
我所做的來解決這個問題是修改軸功能在爲破折號相同的位置繪製網格線。

希望有所幫助。

來源

2015-03-13 15:04:46

如何添加軸標籤和網格到拉斐爾條形圖

回答

相關問題