Question

我遇到了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' });
	
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轴上的标签不匹配。
如何在条形图中添加网格线？我尝试用路径元素绘制它，但它没有对齐，因为与传递的值相比，条形变得越来越大。

由于 VED

Answer 1

我知道这已经有几个月了，希望我的回答可以帮助你或将来的某个人。

因此发生了一些导致这些问题的事情。在x和y中缩放条形以填充在调用paper.barchart时给出图表的可用高度和宽度。因此，抵消这种情况的一种方法是传递虚拟0值，以使条宽相同。

对于高度缩放，您需要将＆＃34;设置为＆＃34;条形图的选项，以使条形图绘制到适当的值。

查看我显示您的数据的plunker。这是图表创建调用之一：
```
var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]], 
    {
      to: 100
    });
```
我为解决这个问题所做的是修改轴功能，以便在与破折号相同的位置绘制网格线。

希望有所帮助。

如何将轴标签和网格添加到raphael条形图

1 个答案: