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

Question

我在 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 。您必须更改图表对象内每个标签(我们的日期)的属性:

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