如何将轴标签和网格添加到拉斐尔条形图中

How to add axis labels and grid to raphael bar chart

本文关键字：条形图 添加 网格 标签      更新时间：2023-09-26

我对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>

问题：

  1. 如何阻止酒吧变得越来越小？第一个例子有6个小节，第二个例子有3个小节，所以在第二个示例中，所有的东西都更大，所以它和y轴上的标签不匹配。

  2. 如何在条形图中添加网格线？我试着用path元素绘制它，但它没有对齐，因为与传递的值相比，条形图越来越大和越来越小。

谢谢Ved

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

  1. 因此，正在发生的一些事情导致了这些问题。条形图在x和y方向上都进行了缩放，以填充调用paper.barart时图表给出的可用高度和宽度。因此，抵消这种情况的一种方法是传入伪0值，使条形图宽度相同。

    对于高度缩放，您需要设置条形图的"to"选项，以便将要绘制的条形图设置为适当的值。

    看看我制作的这个展示你数据的傻瓜。以下是图表创建调用之一：

    var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]], 
    {
      to: 100
    });

  2. 为了解决这个问题，我修改了轴函数，在与虚线相同的位置绘制网格线。

希望能有所帮助。

相关文章：