如何在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") 
];