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就好.