Question

我以.csv格式从我的Raspberry PI获取动态生成的数据，我想为我的研究所制作一个网页来分析输出的波形。该图的主要特征是图表应根据修改后的数据自动更新。我应该怎么做呢？

Answer 1

我假设您正在寻找的解决方案必须在HTML 5和JavaScript中工作，其中没有服务器端处理。 raspberry pi将文件发布到服务器。我们使用的是morris图表，它是JavaScript库 http://morrisjs.github.io/morris.js/ 莫里斯使用json格式 1：读取csv文件 2：将csv数据转换为json对象 3：初始化图表

试试这个例子csv data

＆＃34;经过＆＃34;＆＃34;值＆＃34;，B ＆＃34; OCT-12＆＃34;，24,2 ＆＃34; OCT-13＆＃34;，34,22 ＆＃34; OCT-14＆＃34;，33,7 ＆＃34; OCT-15＆＃34;，22,6 ＆＃34; OCT-16＆＃34;，28,17 ＆＃34; OCT-17＆＃34;，60,15 ＆＃34; OCT-18＆＃34;，60,17 ＆＃34; OCT-19＆＃34;，70,7 ＆＃34; OCT-20＆＃34;，67,18 ＆＃34; OCT-21＆＃34;，86,18 ＆＃34; OCT-22＆＃34;，86,18

＆＃13;

 $(document).ready(function() {

   $.ajax({
     url: "linechartdata.csv",
     success: function(data) {
       processData(data)
     }
   });
 });


 function processData(data) {
   var record_num = 3; // or however many elements there are in each row
   var dataLines = data.split(/\r\n|\n/);
   var entries = dataLines[0].split(',');
   var records = [];

   var headers = entries.splice(0, record_num);
   console.log(dataLines.length)
   for (var i = 1; i < dataLines.length; i++) {
     var obj = dataLines[i].split(',');
     if (obj.length == headers.length) {
       var tarr = [];
       for (var j = 0; j < headers.length; j++) {
         //doing it this way to get strings and numbers
         var field01;
         var field02;
         var field03;
         if (j == 0) {
           field01 = obj[j]
         }
         if (j == 1) {
           field02 = obj[j]
         }
         if (j == 2) {
           field03 = obj[j]
         }
         var o = {
           elapsed: field01,
           value: field02,
           b: field03
         }
         records.push(o);
       }       
     }
   }
   initChart(records)
 }

 function initChart(records) {

   var chart = Morris.Line({
     element: 'morris-chart-network',
     data: records,
     axes: false,
     xkey: 'elapsed',
     ykeys: ['value', 'b'],
     labels: ['Download Speed', 'Upload Speed'],
     yLabelFormat: function(y) {
       return y.toString() + ' Mb/s';
     },
     gridEnabled: false,
     gridLineColor: 'transparent',
     lineColors: ['#5b6b79', '#a5a5a5'],
     lineWidth: [2, 1],
     pointSize: [0, 2],
     fillOpacity: .7,
     gridTextColor: '#999',
     parseTime: false,
     resize: true,
     behaveLikeLine: true,
     hideHover: 'auto'
   });
 };

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Morris Chart</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<body>
  <div>Morris Chart</div>
  <div id="morris-chart-network" style="width:800px;height:600px">
  </div>
  <div>
    example
  </div>

＆＃13;

如何在网页中集成动态图？

1 个答案: