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

我最近开始使用gRaphael作为我的图形需求，并且至今给我留下了深刻的印象。但是，在生成线图时遇到了一些困难，特别是当我尝试将X轴的值设置为日期时，图形无法呈现。我的代码来生成图形是：如何使用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年二月，2001年3月......等......等等......'？

非常感谢，非常感谢！

来源

2010-07-28 SW4

首先，你必须给图表一些值，它不会抱怨。你的情况，你可以保存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}); 
    });

的。每个可以通过常规

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

被替换如果你喜欢，可以循环使用

。

来源

2010-08-11 07:30:54 Morten

非常感谢:) – SW4 2010-08-19 16:01:02

这个答案是错误的！参数应该是（索引，标签），如下面的答案。这引起了一个小时的困惑，然后我终于看到了差异。 – chiliNUT 2013-12-09 23:30:33

嗨。我对此很新。我只是想知道我们应该在哪里插入这段代码......我的意思是我有以下代码var lines = r.linechart（30，30，600，440，[[01/01/2014,02/01/2014， 2014年5月1日，2014年04月01日2014年5月1日]]，[[100,150,130,85,100]]，{axisxstep：20，nostroke：false，轴：“0 0 1 1”，符号：“circle “，smooth：true}）。hoverColumn（function（）{this.tags = r.set（）; for（var i = 0，ii = this.y.length; i 2014-01-13 01:06:16

$.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}); 
});

来源

2013-04-14 13:30:24 AbdullahDiaa

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

回答

相关问题