【问题标题】:Is it possible to get X axis offset or padding in gRaphael?是否可以在 gRaphael 中获得 X 轴偏移或填充?
【发布时间】:2012-09-18 09:52:58
【问题描述】:

我尝试在 gRaphael 中创建一个非常简单的折线图。我的问题是我的图表的第一个值总是放在 y 轴上。有没有办法为第一个点添加填充或偏移,使其不在 y 轴上?

我尝试过的一个解决方案是添加另一组 x 值,它们比我另一行的 x 值小一个和一个大,但这会破坏我的 x 轴标签。

我创建了一个jsFiddle 来说明我的问题。其中第一张图是我目前拥有的,第二张图显示了上述解决方案的问题。

【问题讨论】:

  • 你看过 Ico(同样基于 Raphael)吗?由 gRaphael 的创建者推荐,默认有你想要的行为:alexyoung.github.com/ico
  • 我没有,看起来还不错。它还可以通过将鼠标悬停在图表中的点上来显示值吗?

标签: javascript raphael graphael


【解决方案1】:

(虽然@eterps 的建议是可以接受的,而且有时使用现成的解决方案很方便,但我看到有必要使用 gRaphaël 提供解决方案,以帮助其他解决相同问题的人。)


  • ...但这搞砸了我的 x 轴标签

    如果您所说的“搞砸”是指缺失值,那么您就快到了。只需将 axisxstep 的值更新为 4,考虑到添加的额外 2 个值,您就可以开始了(参见下面的演示)。

  • 另一方面,如果您指的是过多的填充 - 我建议使用日期对 x 轴的值进行更语义化的描述,同时为演示文稿(标签)应用日期格式化程序。来自Ex Ratione原因 在一篇描述此方法的综合论文中对此进行了描述(见下面的链接)。

    应用此技术后,您可以对格式化的日期值使用填充黑客,并获得更精细的粒度,从而缩小那些丑陋的排水沟。查看下面的第二个演示,了解如何开始。

    免责声明:这种方法需要将Steven Levithan's Date Format 作为附加依赖项包含在内。在提交代码之前考虑到这一点。

演示:

参考资料:

【讨论】:

  • Ex Ratione 有日期和时间的例子。对我来说,这有点不同,因为我们可以在日期之间有一些差距,并且需要在之前填补所有这些差距
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-04-22
  • 2019-01-24
  • 2018-04-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多