zoukankan      html  css  js  c++  java
  • Highcharts 的实际实践一

    题记:

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

    我的需求:

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

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

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

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

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

    好了.开始进入正题.

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

    下载的地址:

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

    2.在你的页面中引入

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

    3. 建立一个DIV

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

    4. 编写js,用js初始化

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

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

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

     1 var options = {
     2         chart: {
     3             renderTo:'container',
     4             type:'spline',
     5         },
     6         title: {
     7               text: '参数监控记录',
     8               x: -20 //center
     9           },
    10           xAxis:{
    11               type : 'datetime',
    12               title : {
    13                   text : "采集时间"
    14               },
    15               dateTimeLabelFormats: {
    16                   millisecond:"%M:%S.%L",
    17                   second:"%H:%M:%S",
    18                   minute:"%d %H:%M",
    19                   hour:", %m-%d %H",
    20                   day:"%Y-%m-%d,%A",
    21                   week:"%A",
    22                   month:"%Y-%M",
    23                   year:"%Y"
    24             },
    25             labels : {
    26                 enabled : true,
    27                 step : 2,
    28                 //formatter : function(){
    29                 //    return this.value;
    30                 //}
    31             }
    32           },
    33           yAxis: {
    34               title: {
    35                   text: '参数值'
    36               },
    37               plotLines: [{
    38                   value: 0,
    39                    1,
    40                   color: '#808080'
    41               }],
    42               min : 0,
    43               max : 100
    44           },
    45           series: [],
    46           tooltip: {
    47             headerFormat: '<b>{series.name}</b><br>',
    48             pointFormat: '{point.x:%y-%m-%d %H:%M:%S.%L} : {point.y:.2f}',
    49             crosshairs: [{
    50                  2,
    51                 color: 'green'
    52             }, {
    53                  2,
    54                 color: 'green'
    55             }],
    56             positioner: function() {
    57                 return {
    58                     x: 70,
    59                     y: 55
    60                 }
    61             }   
    62         },
    63 
    64         credits:{
    65             enabled:true, // 版权信息
    66             text:"XXXX有限公司",
    67             href:"<%=basePath%>" + "home.do"
    68         },
    69   
    70           plotOptions: {
    71             spline:{
    72                   dataLabels: {
    73                        enabled: true,
    74                        format : '{y:.2f}'
    75                 },
    76                 animation:false,
    77               },
    78         },
    79     };

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

     1 //初始函数,设置定时器,定时取数据
     2     $(function () {
     3     queryData(0);
     4    
     5        var i=0;
     6     var timer = setInterval(function(){
     7         i++;
     8         if(i>=3) {i=0;}
     9         queryData(i);
    10     },10000);
    11     
    12     //停止刷新
    13     $("button").click(function(){
    14         clearInterval(timer);
    15         });
    16     });
    17     
    18     var categories = [];
    19     var datas = [];
    20     
    21     //Ajax 获取数据并解析创建Highcharts图表
    22     function queryData(index) {
    23         $.ajax({
    24             url:"getmonitorparamgroup.do?index=" + index,
    25             type:'get',
    26             dataType:"json",
    27             success:function(data) {
    28                 
    29                 if (data ===  null) {
    30                     swal("无数据","","info");
    31                     return;
    32                 }
    33                 
    34                     //for(x in data){
    35                         //options.series[x].type = data[x].type;
    36                         //options.series[x].data = data[x].data;
    37                         options.series = data;
    38                     //}
    39                     
    40                     //$.each(data,function(i,n){
    41                     //    categories[i] = n[1];
    42                     //    datas[i] = n[2]*1;
    43                     //});
    44                     //options.xAxis.categories = categories;
    45                     //options.series[0].data = datas;
    46                     
    47                     chart = new Highcharts.Chart(options);
    48              }
    49         });
    50     }

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

  • 相关阅读:
    HDU 4472 Count DP题
    HDU 1878 欧拉回路 图论
    CSUST 1503 ZZ买衣服
    HDU 2085 核反应堆
    HDU 1029 Ignatius and the Princess IV
    UVa 11462 Age Sort
    UVa 11384
    UVa 11210
    LA 3401
    解决学一会儿累了的问题
  • 原文地址:https://www.cnblogs.com/SamRichard/p/5256762.html
Copyright © 2011-2022 走看看