代码之家 › 专栏 › 技术社区 › SW4

如何使用图形线图设置X轴的日期值

raphael javascript

SW4 · 技术社区 · 14 年前

我最近开始使用石墨烯来满足我的绘图需求,到目前为止我印象深刻。但是,我在生成折线图时遇到了一些困难,特别是当我尝试将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>

我怎样才能用“2001年1月、2001年2月、2001年3月……等等……”来替换x轴的值“1、2、3、4、5、6、7”?

非常感谢,大家都非常感谢!

2 回复 | 直到 11 年前

lowercaseashley Morten 11 年前

首先,你必须给图表一些它不会抱怨的值。在您的案例中,您可以保存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});
    });

可以用常规的

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

如果你喜欢的话,可以循环。

AbdullahDiaa 12 年前

$.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});
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前