首页 > 我的观点, 技术杂记, 程序人生 > jQuery and Highcharts

jQuery and Highcharts

最近新做的系统刚刚上线,前段时间的努力终于有了阶段性的成果,可以小小的庆贺一下。当然,这只是题外话了,主要目的是为了引入今天的正题——Jquery和Highcharts。在进入正式的内容之前,有必要先简单介绍一下jQuery和Highcharts分别是什么:
jQuery (http://jquery.com)
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
(jQuery是一个快速、简洁的Javascript库,它的主要功能是简化Html文档的遍历、事件处理、动画和ajax交互,从而加快web端的开发。jQuery设计的初衷是改变程序员使用Javascript写程序的方式。)

Highcharts (http://www.highcharts.com)
Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
(Highchars是一个用纯Javascript写的图表绘制的库,它可以为你的web app提供直观、交互式的图表。当前,用Highcharts可以实现直线图、曲线图、区域图、曲线区域图、柱状图、条形图、饼图、散点图等一系列的图表。)

通过上面的简介,我们可以看出jQuery和Highcharts都是Javascript的库,所以,如果本文的读者朋友有一些Javascript的基础就再好不过了。不过,没有的朋友也不用担心,我尽量用最通俗的语言来把主要的观点表述出来。

  • 1. jQuery:
  • 用了一段时间的jQuery,我个人感觉,它最大的优势体现在两个方面:
    (1)跨浏览器做得非常好,相信写过javascript的朋友应该都了解,由于主流的浏览器采用的Javascript引擎不一样(具体可以参考:http://zh.wikipedia.org/zh-sg/JavaScript%E5%BC%95%E6%93%8E ),导致要写一个跨浏览器用web app,至少要兼容IE/Firefox/Chrome/Safari这几个最为主流的浏览器,是一件非常头疼的事情。经常要为兼容各种浏览器而要写一堆额外的代码。现有,有了jQuery,这种最为基础的事情由它来完成,程序员只需要关注自己的业务逻辑即可。
    (2)语法很简洁。主要体现在几个方面:
    a. 一是要选取某个Html Document的元素进行某种操作,比如你要获取id为username的输入框中用户输入的用户名,只需要$(“input#username”).val()就可以了。关于详细的选取语法,这里不做过多的介绍,具体可以参考jQuery Selector(http://api.jquery.com/category/selectors/).
    b. 二是函数式编程的风格,在这个closure/function大行其道的年代,越来越多的人习惯于函数式编程,jQuery提供的是完全函数式编程的方式,使用非常方便,请看下面的例子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <script type="text/javascript">
    $(document).ready(function(){
      $("button#load").click(function(){
        $.ajax({url:"demo_ajax_load.txt",success:function(result){
          $("div#data").html(result);
        }});
      });
    });
    </script>

    (注:上面的例子比较简单,就是在点击一个id为load的button的时候,异步加载demo_ajax_load.txt这个文件,然后把内容显示在id为data的div中)
    c. 三是jQuery提供了非常丰富ajax接口,相比于之前XMLHttpRequest这些,更加通用、方便,感兴趣的同学可以参考:http://api.jquery.com/category/ajax/

  • 2. Highcharts:
  • Highcharts是基于jQuery/MooTools/Prototype这三个库来实现的,所以要想了解Highcharts, 首先要了解jQuery/MooTools/ProtoType这三个中的其中一个。jQuery在前文中已有介绍,MooTools和Prototype也是比较成熟的Javascript库,感兴趣的朋友可以通过阅读相关文档来了解。我个人比较推荐读者朋友学习jQuery, 具体的优点在前面已经提到过了,另外,Highcharts的官方文档中,很多例子也都是jQuery的,所以从这个角度看,学习jQuery+Highcharts更加合情合理一些:)

    Highcharts也是跨浏览器的,但是可能会因为不同的浏览器,采用的图形库不一样,显示的效果和速度会有一定的差异,所以,推荐大家尽量用Chrome/Firefox/IE8+来做相关的试验。结合我个人的体验的,我觉得Highcharts的优点主要体现在以下几个方面:
    (1)基于jQuery等成熟库的二次封装,包含了jQuery库的所有优点。
    (2)简单的使用逻辑:第一步:准备数据; 第二步:把数据和相关属性转化为Highcharts.Chart对象所需要的option; 第三步:创建Highcharts.Chart(option)对象,将option传入。经过这三步,你所要的图表就完成了,详细的用法可以参考官方提供的How to use(http://www.highcharts.com/documentation/how-to-use )和API reference document(http://www.highcharts.com/ref/ )。
    (3)所创建的图表是可交互的,相对于传统的静态图片形式的图表,更加实用、方便。

    通过上面的介绍,相信读者朋友对jQuery和Highcharts都有了一些基本的了解,写到这里,也许今天这篇文章就该结束了。但是,请大家继续往下面看,上面只是一些科普性的内容,我真正想要表达的内容在后面。下面我会结合自己从事后台开发几年的经历,谈几点自己的看法。

    做后台开发的朋友,相信跟我的经历都是类似的,每天面对着的基本都是linux的黑白终端,所写的程序没有漂亮的UI,只有黑白的终端输出或者是LOG。当然这些都是由后台程序,尤其是Server本身的特性所决定的,它不需要漂亮的UI,有足够详细的LOG就可以了。当系统比较小的时候,可能看看每个server local的LOG就够了,即可以了解server运行的情况,又可以及时的定位系统中出现的问题。但是,随着我们开发的系统的规模越来越大,一台台Server的去看LOG已经变得不太现实。这时候,就需要我们做一些额外的附属系统,来方便我们查看系统的运行状况,来帮助我们定位系统在运行过程中遇到的问题。

    一种比较容易想到的办法是把系统各个环节的LOG收集到一起,在集中的LOG的基础上,再做一些额外的处理,像facebook的scrible系统(https://github.com/facebook/scribe),就是做这个事情的。把LOG收集以一起,只是这里的第一步,接下来,还需要提供一个方便易用的web UI,来查看系统运行的情况和定位发现的问题。

    上面所讲的方法,本质上还是一种offline的基于log的分析。有时候,我们可能还需要对系统有一个online的实时运行状态的监控,尤其对于提供的service直接面向最终用户的server。这时候,如果这些server能够提供一些http的service,自身运行状况相关的数据都可以通过http request实时获取,那么,我们就可以基于这个来做一些事情。做一个整合的web前台,把整个系统各种运行相关的实时数据,通过各个server所提供的http service接口获取到,然后在web端展示出来,并且可以基于这部分数据做一些实时的监控。这样,系统本身就有了一个全局的view,整个系统的运行都在掌握之中。

    通过上面的例子,一方面是想说,系统做大之后的运营、监控很重要;另一方面,是想表达一个观点,我个人的亲身体验:每个后台开发都应该懂点web开发的知识,把你的系统通过web前台展示出来,把你的系统更好的运营起来。这里推荐几个很不错的web开发知识学习的网站(个人比较推荐1-4):

  • 1. w3schools: http://www.w3schools.com/
  • 2. jQuery: http://jquery.com/
  • 3. jQuery UI: http://jqueryui.com/
  • 4. Highcharts: http://www.highcharts.com/
  • 5. MooTools: http://mootools.net/
  • 6. Prototype: http://www.prototypejs.org/
    1. 本文目前尚无任何评论.
    1. 本文目前尚无任何 trackbacks 和 pingbacks.
    您必须在 登录 后才能发布评论.