如何使用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軸的日期值

回答

相關問題