Morris.js-利用JavaScript生成时序图

最新推荐文章于 2022-04-25 11:54:29 发布

weixin_30634661

最新推荐文章于 2022-04-25 11:54:29 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sowhat4999/p/4542181.html

版权

morris.js是一个轻量级的时间序列javascript类库，是网页显示图表的好工具。github项目地址：点击打开，使用起来很简单，但是需要你有一点网页设计的一些基本知识，对一个网页内容的结构要有一定的了解。可以从项目地址下载下来，然后在网页的<head>标签内导入相应的js文件，类似这样的（注意你的目录路径）：

  <script src="js/jquery.min.js"></script> 
  <script src="js/raphael-min.js"></script> 
  <script src="js/morris.min.js"></script>

具体使用的方法你可以参考官方给的范例，这里就不多说了，说下我遇到的问题，主要是我获取的到的信息的格式问题，morris.js加载的一条信息一般是这样的：

["year: '2007' ","value1:30","value2:15"] ["year: '2008' ","value1:18","value2:20"]

而我的数据是["year:'2007'", "year:'2009'"] ["value:30", "value:20"] ["value2:30", "value2:20"],对于一些数据量小的，到是无所谓可以用笨的方法，但是数据量太大的时候，就显的很麻烦了，应该这里讲的主要是数组的转置功能在javascript下的实现：

先看自带的数据的现充：

<!doctype html>
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
  <script src="../morris.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
  <script src="lib/example.js"></script>
  <link rel="stylesheet" href="lib/example.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
  <link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates YYYY</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
var year_data = [
  {"period": "2012", "licensed": 3407, "sorned": 660},
  {"period": "2011", "licensed": 3351, "sorned": 629},
  {"period": "2010", "licensed": 3269, "sorned": 618},
  {"period": "2009", "licensed": 3246, "sorned": 661},
  {"period": "2008", "licensed": 3257, "sorned": 667},
  {"period": "2007", "licensed": 3248, "sorned": 627},
  {"period": "2006", "licensed": 3171, "sorned": 660},
  {"period": "2005", "licensed": 3171, "sorned": 676},
  {"period": "2004", "licensed": 3201, "sorned": 656},
  {"period": "2003", "licensed": 3215, "sorned": 622}
];
Morris.Line({
  element: 'graph',
  data: year_data,
  xkey: 'period',
  ykeys: ['licensed', 'sorned'],
  labels: ['Licensed', 'SORN']
});
</pre>
</body>

效果图：

我实现的方式好像和上面还不一样，我的是在javascript中填充数据的，这个数据在量小的情况下可以满足需求，但是遇到我这种情况并且是大数量的话就必须自己写了：

<!DOCTYPE html>
<html>
 <head> 
  <link rel="stylesheet" href="css/morris.css" /> 
  <script src="js/jquery.min.js"></script> 
  <script src="js/raphael-min.js"></script> 
  <script src="js/morris.min.js"></script> 
  <script type="text/javascript">
      var   a   =   new   Array();//原来是3x2
      a[0]   =   new   Array("year:'2007'", "year:'2009'");//如果需要X坐标反置的话，用reverse()函数      
      a[1]   =   new   Array("value:30", "value:20");
      a[2]   =   new   Array("value2:30", "value2:20");
      var result=new Array();
      //创建二维数组，相当于a=[a[0],a[1]....]
     for (var j=0;j<a[0].length;j++) {//列的变化
             result[j]=new Array();
          for (var i=0;i<a.length;i++) {//按<列>取值放入数组中
              result[j].push(a[i][j]);//变量i为对应行数坐标
      }
      }
      //alert(a[0].length);
     $(document).ready(function () {
     var obj = new Object();
     var arr = [];
     for (var h=0;h<a[0].length;h++) {
         //var define = "{"+result[1].toString()+"}";
       obj[h] = eval('(' + "{"+result[a[0].length-h-1].toString()+"}" + ')');
       arr.push(obj[h])
     }
     //alert(arr.join());
         new Morris.Line({
  element: 'myfirstchart',
  data: arr,//注意这里的写的形式和原来的对比下
  xkey: 'year',
  ykeys: ['value','value2'],
  labels: ['Value','value2']
});
  });
  </script> 
 </head> 
 <body> 
  <h1>Area charts</h1> 
  <div id="myfirstchart" style="height: 250px;"></div>  
 </body>
</html>

看看100个点的显示，我把pointsize值设置为0了，所以图上你看不出点，考虑到点太多所以就不显示了，但是监听鼠标弹出信息的功能还是有的：

  <link rel="stylesheet" href="${ctxStatic}/mystyles/js/mobile/morris.css">
    <script type="text/javascript"> 
        $(document).ready(function() {
        var data1 = new Array(),data2 = new Array(),data3 = new Array(),data4 = new Array(),data5 = new Array(),data6 = new Array(),data7 = new Array(),upload = new Array();
      $("span[id='deviceTem']").each(function(i){
        data1[i] = $(this).html();
      });
      $("span[id='temWater']").each(function(i){
        data2[i] = $(this).html();
      });
      $("span[id='ph']").each(function(i){
        data3[i] = $(this).html();
      });
      $("span[id='do']").each(function(i){
        data4[i] = $(this).html();
      });
      $("span[id='speed']").each(function(i){
        data5[i] = $(this).html();
      });
      $("span[id='pressure']").each(function(i){
        data6[i] = $(this).html();
      });
      $("span[id='air']").each(function(i){
        data7[i] = $(this).html();
      });
      $("span[id='time']").each(function(i){
        upload[i] = $(this).html();
      });
      var a = new Array(upload.reverse(),data1.reverse(),data2.reverse(),data3.reverse(),data4.reverse(),data5.reverse(),data6.reverse(),data7.reverse());
      var result=new Array();
      var temp = a[0].length;
      var temp2 = a.length;
      //创建二维数组，相当于a=[a[0],a[1]....]
     for (var j=0;j<temp;j++) {//列的变化
        result[j]=new Array();
        for (var i=0;i<temp2;i++) {//按<列>取值放入数组中
          result[j].push(a[i][j]);//变量i为对应行数坐标
      }
      }
     var obj = new Object();
     var arr = [];
     for (var h=0;h<temp;h++) {
      //var define = "{"+result[1].toString()+"}";
     obj[h] = eval('(' + "{"+result[h].toString()+"}" + ')');
     arr.push(obj[h]);
     }
      new Morris.Line({
        element: 'container',
        data: arr,
        xkey: 'time',
        ykeys: ['value1','value2','value3','value4','value5','value6','value7'],
        labels: ['水温','罐温','pH','DO','风速','压力','空气'],
        parseTime: false,//注意相关的属性
        pointSize: 0
      });
      //end  
          });
    </script>

View Code

转载于:https://www.cnblogs.com/sowhat4999/p/4542181.html

weixin_30634661

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Morris.js-利用JavaScript生成时序图

morris.js是一个轻量级的时间序列javascript类库，是网页显示图表的好工具。github项目地址：点击打开，使用起来很简单，但是需要你有一点网页设计的一些基本知识，对一个网页内容的结构要有一定的了解。可以从项目地址下载下来，然后在网页的<head>标签内导入相应的js文件，类似这样的（注意你的目录路径）： <script src="js/jquery.mi...
复制链接

扫一扫