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

-2

我从我的Raspberry PI以.csv格式获取动态生成的数据，我想为我的研究院制作一个网页来分析输出的波形。该图的主要特点是该图应根据修改后的数据自动更新。我应该如何去做这件事？如何在网页中集成动态图形？

2015-12-21 Jatin Narula

*** o.0您尝试过什么？*** – nicael

使用高图形插件的图形几乎所有类型的图形，并从您的动态数据生成 – Shree29

有几个库，你可以使用。我倾向于使用Chart.js。（http://www.chartjs.org/） –

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

尝试这个例子CSV数据

“过去”， “值”，b “OCT-12”，24,2 “OCT-13”，34,22 “OCT-14”，33,7 “OCT-15” ，22,6 “OCT-16”，28,17 “OCT-17”，60,15 “OCT-18”，60 ，17 “OCT-19”，70,7 “OCT-20”，67,18 “OCT-21”，86,18 “OCT-22”，86,18

$(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' 
 
    }); 
 
};

<!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>

来源

2015-12-21 21:33:22 T1mark

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

回答

相关问题