higcharts 是一个图表展示框架，支持基本图形，支持静态、动态等数据，文档很详细，实例代码很多，容易上手，这个JS是我的一个获取实时动态数据的JS脚本，依赖JQUERY.

第一次加载时从数据库中抽取监控数据，JS生成昨天及上周同天的对比数据。 每分钟动态更新图表。

var bistock = bistock || {};  $(function () {          var seriesOptions = [],     // 历史对比曲线 0当前，1昨天，7上周          periods = [0, 1, 7],           impl,        config,    seriesCount = 0,     charts = [],    get_data_url = false,    update_url = false;      impl = {      config_chart: function() {      Highcharts.setOptions({       colors: ['#DDDF00', '#058DC7', '#50B432', '#ED561B', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],      global: { useUTC: false  }      });      },     debug: function(msg, vars) {     console.log(msg);     if(vars) {      $.each(vars, function(i, v) {       console.log(i+':'+v);      });     }    },    /**     * 生成监控图表     * @id 图表id     * @div 图表渲染的div     */    generate_chart: function(id, div) {        var tmp_count = 0;     $.ajax({       type: "get",       async: false,       data: {menuid: id},       url: get_data_url,       dataType: "json",       success: function (response) {       $.each(response.rs, function (series_name, item) {              // 添加历史对比数据              $.each(periods, function (j, period) {                seriesOptions[seriesCount] = {          name: impl.get_series_name(period) + series_name,          data: (period === 0) ? item.data : impl.get_series_data(item.data, period),          type: 'spline',          lineWidth: (seriesCount == 0 || seriesCount == 3) ? 4 : 2         };         impl.debug("Series info: ", {'name':seriesOptions[seriesCount]['name'], 'number': seriesCount});         seriesCount++;        });         });       impl.createChart(seriesOptions, div, id);             seriesOptions = [];       seriesCount = 0;       },       error: function(){        alert('Fail to render to chart '+id);       }      });    },    /**     * 获取图表曲线的名称     * @period 图表曲线周期0,1,7     */          get_series_name: function (period) {                return (period == 0) ? '当天' : ((period == 1) ? '昨天' : '上周同天');          },    /**     * 获取图表的数据     * @data 原始数据     * @period 图表曲线周期0,1,7     */          get_series_data: function (data, period) {                            var new_series_data = [],                  time_offset = period * 86400 * 1000,                  now = (new Date()).getTime();                                $.each(data, function (i, item) {                  // 删除某段时间的数据，然后整体偏移.                  var point_data;                  if (item[0]+time_offset < now+8*3600*1000-600*1000) {       new_series_data[i] = [item[0] + time_offset, item[1]];                  }                              });                 return new_series_data;          },    /**     * 动态更新图表     */    updateChart: function(menuid) {     setInterval(function() {                 $.ajax({           url: update_url,           type: 'GET',        data: {menuid: menuid},           async: false,                 contentType: "application/json; charset=utf-8",           dataType: 'JSON',           success: function(response) {                      if (!response.rs) {          impl.debug('No Data');                 impl.debug("Chart Info: ",{'menuid': menuid, 'time': response.happen_time});          return;         }                  impl.debug("Chart Info: ",{'menuid': menuid, 'time': response.happen_time});               var updateCount = 0;                   $.each(response.data, function(i, items){          $.each(items, function(j, item) {                     impl.debug("Series info: ", {'data': item, 'number': updateCount});           charts[menuid].series[updateCount].addPoint(item, true, true);                    updateCount++;                   });         });         updateCount = 0;           },           cache: false         });         }, 60000);     },    /**     * 从缓存中读取历史数据     * @id menuid     * @period 1,7     * @num 数据序列 0,1,2...     * @size 曲线的大小     * @time 当期时间     * @return 返回一个点的数据     */    get_history_point: function(id, period, num, size, time) {           var idx = (size == 1) ? 0 : num;     var tmp_size = cacheData[id][idx].length;     // fix the time     var tmp_point_data = cacheData[id][idx][tmp_size-period*144+1][1];       return [time, tmp_point_data];    },    rand_point: function(max) {     var x = (new Date()).getTime(), // current time      y = Math.round(Math.random() * max);     return [x,y];    },    /**     * 创建图表     * @seriesData 图表数据     * @div 渲染到div     * @id 图表的唯一id        */          createChart: function (seriesData,div,id) {     charts[id] = new Highcharts.StockChart({      chart: {                        animation: Highcharts.svg,                    marginRight: 10,                   renderTo: div,                   events: {                       load: impl.updateChart(id)                   }               },          colors: (config['colors']) ? config['colors'] : ['#AA4643','#4572A7','#89A54E','#80699B','#3D96AE','#DB843D','#92A8CD','#A47D7C','#B5CA92'],                  rangeSelector: {                      buttons: [{        count: 1,        type: 'hour',        text: '1h'       },{        count: 8,        type: 'hour',        text: '8h'       }, {        count: 1,        type: 'day',        text: '1d'       }, {        count: 1,        type: 'week',        text: '1w'       },{        count: 1,        type: 'month',        text: '1m'       },{        count: 3,        type: 'month',        text: '3m'       },{        type: 'all',        text: 'All'       }],       inputEnabled: false,       selected: 1                  },      legend: {       borderWidth: 0,       enabled: true      },                  yAxis: {                          min: 0,                      plotLines: [{                          value: 0,                          width: 2,                          color: 'silver'                      }],       labels: {        enabled: config['isEnabled']         }                  },                    plotOptions: {                      series: {                          //compare: 'percent'                      }                  },                    tooltip: {       pointFormat: config['isEnabled']            ? '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br />'            : '<span style="color:{series.color}">{series.name}</span><br />',                      valueDecimals: 2                  },                    series: seriesData              });          },    run: function() {       impl.config_chart();     $.each(config['names'], function(i, name){      impl.generate_chart(name, 'container_'+i);     });    }      };   bistock = {    init: function(vars) {     config = vars;     impl.run();    }   };  });