1

一个小前提：我正在节食，我正在尝试绘制一张减肥图表。

为此，我使用了一个小 django 应用程序来存储重量读数，并使用 gRaphael ( http://g.raphaeljs.com/ ) 图表库来绘制报告。你可以在这里看到 wip：http ://www.totanus.net/weight/

此时我正在使用“ymd”格式在 X 轴上打印日期以正确排序它们，但我不太满意（实际上我什至不确定图表是否正确......）而且我我想知道是否有更好的方法来呈现日期。

主要问题是：

  1. 有没有办法使用除“100610”或“20100610”以外的不同标签？
  2. 有没有办法每 n 天或 n 公斤设置固定的 x 和 y 轴标签？
  3. 你能建议我一些渲染这种图表的最佳实践吗（我对计算我的整体趋势特别感兴趣）

预先感谢您的任何帮助！

张

4

4 回答 4

5

给定一个xwhich 是一个Date对象，我可以使用以下步骤来实现这一点：

  1. 取最小值Date并将其getTime()方法的值缓存在一个变量中 ( originX)

  2. 对于每个Date( curDate)，将其转换为来自 的时间偏移量originX。

    var timePassed = curDate.getTime() - originX

  3. 阴谋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-01T09:17:09.733 回答
3

我没有测试过这段代码，但我正在研究同样的问题。

如果将时间的整数表示形式（自 1970 年 1 月 1 日以来的刻度）存储为 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-09T23:48:45.513 回答
1

我是菜鸟，这是我从代码中发现的。

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

于 2010-11-16T17:14:39.913 回答
1

另见： http ://weblog.bocoup.com/alternate-x-axis-intervals-in-g-raphael-js-linechart 的第二部分。这与 Alastair 的解决方案相同，但有时以不同的方式解释相同的事情会有所帮助。

于 2010-11-16T14:55:42.867 回答