如何使用 gRaphael 折线图设置 x 轴的日期值答案

【问题标题】：How to set Date Value for x Axis using gRaphael Line Graph如何使用 gRaphael 折线图设置 x 轴的日期值
【发布时间】：2010-07-28 09:36:28
【问题描述】：

我最近开始使用 gRaphael 来满足我的绘图需求，到目前为止我印象非常深刻。但是，我在制作折线图时遇到了一些困难，特别是当我尝试将 X 轴的值设置为日期时，该图无法呈现。我生成图表的代码是：

    <script type='text/javascript' charset='utf-8'>


            var r = Raphael('holder');


            var lines = r.g.linechart(20, 20, 600, 300, [[1, 2, 3, 4, 5, 6, 7]], [['4.16','6.35','1.77','3.1','9.79','10.03','-0.3']], {nostroke: false, axis: '0 0 1 1', symbol: 'o', smooth: false}).hoverColumn(function () {
                this.tags = r.set();
                for (var i = 0, ii = this.y.length; i < ii; i++) {
                    this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: '#fff'}, {fill: this.symbols[i].attr('fill')}]));
                }
            }, function () {
                this.tags && this.tags.remove();
            });
            lines.symbols.attr({r: 3});



    </script>
    <div id='holder'></div>

如何将 X 轴值“1、2、3、4、5、6、7”替换为“2001 年 1 月、2001 年 2 月、2001 年 3 月……等等……等等。 ...'？

非常感谢，非常感谢所有帮助！

【问题讨论】：

标签： javascript raphael

【解决方案1】：

首先你必须给图表一些它不会抱怨的值。在您的情况下，您可以保存 UNIX 时间戳等然后你可以使用类似这样的东西（使用原型等）来改变值：

lines.axis[0].text.items.each( function ( index, label ) {
      //Get the timestamp you saved
      originalText = label.attr('text');
      newText = 'CONVERT TIMESTAMP TO DATE USING originalText as input HERE';
      //label.rotate(75);
      label.attr({'text': newText});
    });

.each 可以替换为普通的

for(var x = 0; x < lines.axis[0].text.length; x++)

如果你愿意，可以循环。

【讨论】：

这个答案是错误的！参数应为 (index,label)，如下面的答案所示。在我终于看到区别之前，这引起了大约一个小时的困惑。
嗨。我对此真的很陌生。我只是想知道我们应该在哪里准确插入这段代码......我的意思是我有以下代码 var lines = r.linechart(30, 30, 600, 440,[[01/01/2014,02/01/2014, 03/01/2014,04/01/2014,05/01/2014]],[[100,150,130,85,100]], {axisxstep : 20,nostroke: false, axis: "0 0 1 1", symbol: "circle ", 平滑: true }).hoverColumn(function () { this.tags = r.set(); for (var i = 0, ii = this.y.length; i

【解决方案2】：

$.each(lines.axis[0].text.items , function ( index, label ) {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        date = new Date(parseInt(label.attr("text"))),
        day = date.getDate(),
        month = months[date.getMonth()];;

    dateText = month + " " + day;
    //label.rotate(75);
    label.attr({'text': dateText});
});

【讨论】：