gpt4 book ai didi

javascript - 如何向拉斐尔条形图添加轴标签和网格

转载 作者:行者123 更新时间:2023-12-03 11:48:28 26 4
gpt4 key购买 nike

我在使用 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. 如何向条形图添加网格线?我尝试使用路径元素绘制它,但与传递的值相比,随着条形变大变小,它不会对齐。

谢谢维德

最佳答案

我知道这已经是几个月前的事了,希望我的回答对您或将来的某人有所帮助。

  1. 因此,有几件事导致了这些问题。条形在 x 和 y 方向上都进行缩放,以填充调用 paper.barchart 时给定的图表的可用高度和宽度。因此,解决这个问题的一种方法是传入虚拟 0 值,以使条形宽度相同。

    对于高度缩放,您需要设置条形图的“to”选项,以便将条形绘制到适当的值。

    看看这个 plunker我做了显示你的数据。以下是图表创建调用之一:

    var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]],
    {
    to: 100
    });
  2. 为了解决这个问题,我所做的就是修改 axis 函数,在与虚线相同的位置绘制网格线。

希望有帮助。

关于javascript - 如何向拉斐尔条形图添加轴标签和网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25942383/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com