Highcharts 的实际实践一

题记:

原先是想用chart.js 这个轻量级来完成我的需求的,结果基于我的数据不规则,所以实现不了.

我的需求:

XX后台系统会产生有些报警日志.

我负责把这些数据按照图标的方式来展示.

这写报警日志,基于时间和报警值来展示.

时间不规则,而且要实时产生和更新我的图表.

这些数据都存在于数据库中.

好了.开始进入正题.

1.首先下载两个js,一个是jquery,另外一个就是Highcharts

下载的地址:

http://www.hcharts.cn/product/download.php

2.在你的页面中引入

 <script src="js/jquery.js"></script>
 <script src="js/highcharts.js"></script>
3 <script src="js/exporting.js"></script>

3. 建立一个DIV

 <div id="container"    style="min-width: 310px; height: 558px; margin: 0 auto"></div>

4. 编写js,用js初始化

当然在此之前,基于本土原因,加入了语言和时间设置

 Highcharts.setOptions({
         lang:{
            contextButtonTitle:"图表导出菜单",
            decimalPoint:".",
            downloadJPEG:"下载JPEG图片",
            downloadPDF:"下载PDF文件",
            downloadPNG:"下载PNG文件",
            downloadSVG:"下载SVG文件",
            drillUpText:"返回 {series.name}",
            loading:"加载中",
            months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            noData:"没有数据",
            numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
            printChart:"打印图表",
            resetZoom:"恢复缩放",
            resetZoomTitle:"恢复图表",
            shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
            thousandsSep:",",
            weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
         },
         global : {
             useUTC : false
         }
     });

数据要从后台取,所以在初始化属性的时候,不加数据列

 var options = {
         chart: {
             renderTo:'container',
             type:'spline',
         },
         title: {
               text: '参数监控记录',
               x: -20 //center
           },
           xAxis:{
               type : 'datetime',
               title : {
                   text : "采集时间"
               },
               dateTimeLabelFormats: {
                   millisecond:"%M:%S.%L",
                   second:"%H:%M:%S",
                   minute:"%d %H:%M",
                   hour:", %m-%d %H",
                   day:"%Y-%m-%d,%A",
                   week:"%A",
                   month:"%Y-%M",
                   year:"%Y"
             },
             labels : {
                 enabled : true,
                 step : 2,
                 //formatter : function(){
                 //    return this.value;
                 //}
             }
           },
           yAxis: {
               title: {
                   text: '参数值'
               },
               plotLines: [{
                   value: 0,
                   width: 1,
                   color: '#808080'
               }],
               min : 0,
               max : 100
           },
           series: [],
           tooltip: {
             headerFormat: '<b>{series.name}</b><br>',
             pointFormat: '{point.x:%y-%m-%d %H:%M:%S.%L} : {point.y:.2f}',
             crosshairs: [{
                 width: 2,
                 color: 'green'
             }, {
                 width: 2,
                 color: 'green'
             }],
             positioner: function() {
                 return {
                     x: 70,
                     y: 55
                 }
             }
         },

         credits:{
             enabled:true, // 版权信息
             text:"XXXX有限公司",
             href:"<%=basePath%>" + "home.do"
         },

           plotOptions: {
             spline:{
                   dataLabels: {
                        enabled: true,
                        format : '{y:.2f}'
                 },
                 animation:false,
               },
         },
     };

后台代码就是定时从后台取数据

 //初始函数，设置定时器，定时取数据
     $(function () {
     queryData(0);

        var i=0;
     var timer = setInterval(function(){
         i++;
         if(i>=3) {i=0;}
         queryData(i);
     },10000);

     //停止刷新
     $("button").click(function(){
         clearInterval(timer);
         });
     });

     var categories = [];
     var datas = [];

     //Ajax 获取数据并解析创建Highcharts图表
     function queryData(index) {
         $.ajax({
             url:"getmonitorparamgroup.do?index=" + index,
             type:'get',
             dataType:"json",
             success:function(data) {

                 if (data ===  null) {
                     swal("无数据","","info");
                     return;
                 }

                     //for(x in data){
                         //options.series[x].type = data[x].type;
                         //options.series[x].data = data[x].data;
                         options.series = data;
                     //}

                     //$.each(data,function(i,n){
                     //    categories[i] = n[1];
                     //    datas[i] = n[2]*1;
                     //});
                     //options.xAxis.categories = categories;
                     //options.series[0].data = datas;

                     chart = new Highcharts.Chart(options);
              }
         });
     }

这是上面的前台代码.后台这接受请求.组建成一定的格式.把数据负责给series就好.