如何在graphael中擁有不同的價值觀和不同的標籤？

Question

我正在使用graphael的線條圖。我的數據點是日期，這是graphael無法識別的。所以我用1,2,3代表了每一個日期....

事實是，我需要在我的圖表上顯示日期，作爲x軸標籤。我該怎麼做？我試過標籤屬性，但它不起作用。

我的代碼如下所示：

var lines = r.linechart(30, 30, 600, 440,[[1,2,3,4,5]],[[100,150,130,85,100]], {axisxstep : 20,nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function() { 
     this.tags = r.set(); 

     for (var i = 0, ii = this.y.length; i < ii; i++) { 
      this.tags.push(r.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(); 
    }); 

Answer 1

看看這個fiddle。你必須改變每個標籤內chartobject屬性（日期對我們來說）：

var lineChart = r.linechart(0, 0, 200, 250, xValues, yValues1, { 
    smooth: true, 
    colors: ['#F00', '#0F0', '#FF0'], 
    symbol: 'circle', 
    axis: '0 0 1 1' 
}); 

for (var i = 0; i < lineChart.axis[0].text.items.length; i++) { 
    var label = lineChart.axis[0].text.items[i]; 
    var originalDate = new Date(parseInt(label.attr('text'), 10)); 
    var newText = originalDate.getDate() + "/" + (originalDate.getMonth() + 1) + "/" + (originalDate.getFullYear()); 

    label.rotate(60); 
    label.attr({ 
     'text': newText 
    }); 
} 

而且，graphael數據只能是數值型繪製圖表，我們必須爲每一個標籤一個Date對象在x這樣的：

var xValues = [ 
    new Date("01/05/2014"), 
    new Date("01/06/2014"), 
    new Date("01/07/2014"), 
    new Date("01/08/2014"), 
    new Date("01/09/2014"), 
    new Date("01/10/2014"), 
    new Date("01/11/2014"), 
    new Date("01/12/2014"), 
    new Date("01/13/2014") 
];