-2
我從我的Raspberry PI以.csv格式獲取動態生成的數據,我想爲我的研究院製作一個網頁來分析輸出的波形。該圖的主要特點是該圖應根據修改後的數據自動更新。我應該如何去做這件事?如何在網頁中集成動態圖形?
我從我的Raspberry PI以.csv格式獲取動態生成的數據,我想爲我的研究院製作一個網頁來分析輸出的波形。該圖的主要特點是該圖應根據修改後的數據自動更新。我應該如何去做這件事?如何在網頁中集成動態圖形?
我假設你正在尋找的解決方案必須在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>
*** o.0您嘗試過什麼?*** – nicael
使用高圖形插件的圖形幾乎所有類型的圖形,並從您的動態數據生成 – Shree29
有幾個庫,你可以使用。我傾向於使用Chart.js。 (http://www.chartjs.org/) –