Как установить значение даты для оси X с помощью линейного графика gRaphael - PullRequest
Новая
       4

Как установить значение даты для оси X с помощью линейного графика gRaphael

5 голосов
/ 28 июля 2010

Я недавно начал использовать 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', скажем, 'Jan 2001, Feb 2001, Mar 2001 ... и т. Д. И т. Д. ...

Огромное спасибо, вся помощь очень ценится!

Ответы [ 2 ]

7 голосов
/ 11 августа 2010

Сначала вы должны дать диаграмме некоторые значения, на которые она не будет жаловаться. В вашем случае вы можете сохранить метку времени 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});
    });

.each можно заменить обычным 

for(var x = 0; x < lines.axis[0].text.length; x++)

цикл, если хотите.

2 голосов
/ 14 апреля 2013 
$.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});
});
...