如何在使用gRaphael制作的图表中使用日期值？

一点前提：我正在节食，我正在试图画出一个减肥图。如何在使用gRaphael制作的图表中使用日期值？

要做到这一点，我使用一个小Django应用程序来存储重量读数，和gRaphael（http://g.raphaeljs.com/）图表库来绘制报告。你可以看到这里的WIP：http://www.totanus.net/weight/

这时我使用“YMD”格式正确它们序打印在X轴的日期，但我不太满意（其实我甚至确定图表是正确的...），我想知道是否有更好的方法来呈现日期。

的主要问题是：

是否有使用比 '100610' 或 '20100610' 不同标签的方法吗？
有一种方法来设置固定x和y轴标签每正天或正公斤？
你可以建议我一些最佳做法，使这一类型的图表（我在计算我的总体趋势特别感兴趣）

预先感谢您的帮助！

张志贤

来源

2010-06-15 Matteo

我没有测试此代码，但我一直在寻找到同样的问题。

如果存储的时间（自1/1/1970蜱）为x轴的值的整数表示，然后你可以遍历值，并将其转换为日期。

我计上心来为这个来自：http://github.com/DmitryBaranovskiy/g.raphael/issues#issue/8

var canvas = Raphael("holder") 
graph = canvas.g.linechart(....) 

$.each(this.graph.axis[0].text.items, function (index,label) { 
    originalText = label.attr('text'); 
    newText = /* some transformation to originalText */ 
    label.attr({'text': newText}); 
});

如果您newText是从原来的文本值转换（这是你在蜱时间）的日期字符串。

正如我所说的，我还没有测试此代码，但这个想法是合理的理论。

来源

2010-08-09 23:48:45

参见：http://weblog.bocoup.com/alternate-x-axis-intervals-in-g-raphael-js-linechart第二部分。这与阿拉斯泰尔的解决方案一样，但有时它有助于以不同的方式解释相同的事情。

来源

2010-11-16 14:55:42 thisgeek

我是小白，这是我从代码中发现的。

graph.axis[0].text.items[0].attr({'text': "Jan 3 2010"}) ;

来源

2010-11-16 17:14:39 manish

给定一个x其为Date对象，我能够实现这一使用以下步骤：

采取最低Date值并缓存在其getTime()方法的值变量（originX）
对于每个Date（curDate），将其转换为从起的时间偏移。
```
var timePassed = curDate.getTime() - originX 
```
情节x对y。

上面给出了一个图表，其中标签是从UTC时间开始的毫秒数。为了使它看起来不错，按照@Alastair的建议。

下面是一些示例jQuery代码。（请注意，您将需要为了提供formatDate()功能适当地渲染日期）

$.each(chart.axis[0].text.items, function(i, label) { 
    var old = label.attr("text"); 
    if(old) { 
     var newLabel = formatDate(originX + x); 
     if(newLabel) { 
      label.attr({ text: newLabel }); 
     } 
    } 
});

我希望它能帮助！

来源

2011-02-01 09:17:09

如何在使用gRaphael制作的图表中使用日期值？

回答

相关问题