morris.js——绘制统计图表的javascript库

官方网站在这里:http://morrisjs.github.io/morris.js/index.html
用morris.js画的统计图很漂亮、简洁,用法也很简单——基本上只需要传递一个json格式的数据就OK了。
比如下面这段代码,就会在名为myfirstchart的div画出一个记录体重的折线图。

<script>
        new Morris.Line({
            element: 'myfirstchart',
            data: [
                { day: '2014-07-08 21:00', weight: 139.6 },
                { day: '2014-07-08 23:00', weight: 137.4 },
                { day: '2014-07-09 08:00', weight: 137.0 },
                { day: '2014-07-09 23:00', weight: 137.6 },
                { day: '2014-07-10 08:00', weight: 137.2 },
                { day: '2014-07-10 20:00', weight: 138.4 },
                { day: '2014-07-10 23:00', weight: 136.8 },
                { day: '2014-07-11'},
                { day: '2014-07-12'}
            ],
            xkey: 'day',
            ykeys: ['weight'],
            labels: ['weight'],
            xLabels: ['day'],
            ymin: 130,
            ymax: 145,
            smooth: true
        });
    </script>

(具体效果可见http://www.barryzhang.com/weight,是的,我又要减肥了……这次的目标是130斤,祝我成功吧!)


本文链接:http://www.barryzhang.com/archives/343

javascript的函数内部变量的作用域

前几天公司邮件讨论了一个问题——猜下面这段代码的结果:

var tt = 'aa';
function test(){
    alert(tt);
    var tt = 'dd';
    alert(tt);
}
test();

我自己对javascript了解不多,猜的答案是:

aa
dd

——因为自己平时用java比较多,就完全是根据java的思维猜的。

java的思维:

  • 第一次输出:在函数内部的变量tt未定义之前,会从全局变量tt中取值,输出”aa”;
  • 第二次输出:函数内部已经定义了变量tt,由于局部变量的优先级高于全局变量,所以会输出内部变量的值“dd”。

然后运行代码,查看正确答案,果不其然,错了……

正确的答案是:

undefined
dd

原因是:

javascript中的函数内部任何位置声明的变量,都在整个函数内部有效。

也就是说,上面的代码其实是等同于:

var tt = 'aa';
function test(){
    var tt;
    alert(tt);
    tt = 'dd';
    alert(tt);
}
test();

——写成这样的形式就明白多啦!


PS:每种语言都有不同的特性,学习语言的时候,如果不透彻,容易有许多想当然的理解,就很容易处错误。自己学习的时候还是要注意呀~


推荐汤姆大叔的博客: 对学习JS很有帮助。


本文链接:http://www.barryzhang.com/archives/183