Question

我在graphael使用线图。我的数据点是日期，这是graphael无法识别的。所以我用1,2,3 ....代表了每个日期。

事实是，我需要在我的图表中显示日期，作为x轴标签。我怎么能这样做？我尝试了label属性，但它不起作用。

我的代码如下所示：

    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的数据只能是数字类型来绘制图形，我们必须为x中的每个标签创建一个Date对象，如下所示：

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

我如何在graphael上拥有不同的价值观和不同的标签？

1 个答案: