javascript canvasjs Erhalten Datenpunkte dynamisch aus datei.txt

Ziel:javascript canvasjs Erhalten Datenpunkte dynamisch aus datei.txt

Ich mag Daten von datei.txt das ist zu erhalten, sind in /var/www/html/file.txt lokal gespeichert und für den Ringdiagramm verwenden dynamisch auf einem Intervall von 2 Sekunden auf meiner Webseite

datei.txt hat nur einen Eintrag und sieht aus wie:

die Javascript ich versucht habe:

$.get("file.txt", function(data) { 
var x = 0; 
var allLines = data.split('\n'); 
if(allLines.length > 0) { 
    for(var i=0; i< allLines.length; i++) { 
     dataPoints.push({y: parseInt(allLines[i])}); 
     x += .25; 
    } 
} 
var chart = new CanvasJS.Chart("chartContainer",{ 
    title :{ 
     text: "Chart using Text File Data" 
    }, 
    data: [{ 
     type: "doughnut", 
     dataPoints : dataPoints, 
    }] 
}); 
chart.render(); 
}); 
}

Entire html sieht aus wie

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chart using txtfile Data</title> 
    <script type="text/javascript" src="http://canvasjs.com/assets/script   /jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
$.get("graph.txt", function(data) { 
var xVal = 0; 
var allLines = data.split('\n'); 
var chart = new CanvasJS.Chart("chartContainer",{ 
    title :{ 
     text: "Chart using Text File Data" 
    }, 
    data: [{ 
     type: "line", 
     dataPoints : [function() 
     { 
     if(allLines.length > 0) { 
      for(var i=0; i< allLines.length; i++) { 
      xVal +=.25; 
      dataPoints.push({x : xVal, y: parseInt(allLines[i])}); 
    } 
} 
}] 
    }] 
}); 
chart.render(); 
},'text'); 
</script> 
<script type="text/javascript" src="canvasjs.min.js"></script> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html>

Quelle

2017-02-15 theloosegoos

ich so etwas wie dies glauben kann für Sie arbeiten. Möglicherweise müssen Sie Firefox verwenden, da Chrome Ursprungsanforderungen nicht mag.

Zuerst war DataPoints undefined, ich habe den Code in eine Funktion innerhalb von dataPoints verschoben. Ich habe Ihren Variablennamen von x in xVal geändert. Das Wort 'text' wurde hinzugefügt, damit $ get weiß, welches Format es liest und es gab auch eine zusätzliche Klammer. Probieren Sie es aus.

$.get("graph.txt", function(data) { 
var xVal = 0; 
var allLines = data.split('\n'); 
var dps = []; 

for(var i=0; i< allLines.length; i++) { 
    xVal +=.25; 
    dps.push({x : xVal, y: Number(allLines[i])}); 
} 

var chart = new CanvasJS.Chart("chartContainer",{ 
    title :{ 
     text: "Chart using Text File Data" 
    }, 
    data: [{ 
     type: "line", 
     dataPoints : dps 
    }] 
}); 
chart.render(); 
},'text');

Quelle

2017-02-15 19:43:46 sjramsay

danke für Ihre Antwort. Ich muss etwas nicht verstehen, dass Code ein leeres Liniendiagramm erzeugt, das ich dem ursprünglichen Beitrag den gesamten html hinzugefügt habe. – theloosegoos

Ich habe den Code ein wenig geändert, um die Werte zuerst an ein Array zu übergeben, und dann dieses Array zu den dataPoints hinzuzufügen. Das andere Problem war, dass ich das allLines [i] -Objekt in Nummer konvertieren musste. Ich habe es getestet und die Zeile zeigt jetzt – sjramsay

Es funktioniert perfekt Vielen Dank. Es war auch eine Lernerfahrung, weil ich sehen kann, wie man die Probleme besiegelt. – theloosegoos

javascript canvasjs Erhalten Datenpunkte dynamisch aus datei.txt

Antwort

Verwandte Themen